使用vue-pdf-signature实现pdf预览

要实现pdf预览的方式有很多种，最近由于项目需要，尝试使用了标签、vue-pdf、vue-pdf-signature等实现方式，最后选择使用vue-pdf-signature作为最终方案。

embed标签
标签是 HTML 5 中的新标签，标签定义嵌入的内容，比如插件。
embed使用示例：

使用该标签会存在低版本IE不兼容问题，在低版本IE中无法实现预览，它会提示“打开”或者“保存”。

vue-pdf
github地址：https://github.com/FranckFreiburger/vue-pdf
vue.js pdf viewer is a package for Vue that enables you to display and view PDF’s easily via vue components.
对于大多数需求来说，使用vue-pdf已经能够满足项目需求。但是会存在签章不显示问题。当然网上已经存在不少处理该问题的方案提供参考。
1、安装

npm install vue-pdf

2、引入、注册、基本使用示例

vue-pdf-signature
此组件fork自vue-pdf，以解决预览PDF签章及解决重复预览PDF无法重载的问题。
1、安装

npm install vue-pdf-signature

2、基本使用示例：

问题总结：
1、很多时候我们并不能直接拿到.pdf后缀的文件路径，需要通过读取文件文件流获取到文件的url，将获取到的url赋值到embed或者pdf标签的src即可：

let url = window.URL.createObjectURL(res); //res是文件流

更完整的文件流转url方案：

/**
 * 文件流转换为url
 * @param {} data //文件流
 */
export function getObjectURL(data) {
  var url = null
  if (window.createObjectURL !== undefined) { // basic
    url = window.createObjectURL(data)
  } else if (window.webkitURL !== undefined) { // webkit or chrome
    try {
      url = window.webkitURL.createObjectURL(data)
    } catch (error) {
      console.log(error)
    }
  } else if (window.URL !== undefined) { // mozilla(firefox)
    try {
      url = window.URL.createObjectURL(data)
    } catch (error) {
      console.log(error)
    }
  }
  return url
}

2、使用vue-pdf、vue-pdf-signature预览pdf时，只显示第一页，可以通过循环解决：

可以通过以下方式获取numPages

let url = window.URL.createObjectURL(res); //将文件转化成url
let loadTask = pdf.createLoadingTask({
  url: url,
});
loadTask.promise
  .then((pdf) => {
    this.pdfUrl = url;
    this.numPages = pdf.numPages;
  })
  .catch((err) => {
    console.error("pdf 加载失败", err);
  });

3、在IE中预览pdf部分字符无法显示问题，需要引入CMapReaderFactory即可：

import pdf from "vue-pdf-signature";
import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory";

let url = window.URL.createObjectURL(res); //将文件转化成url
let loadTask = pdf.createLoadingTask({
  url: url,
  cMapPacked: true,
  CMapReaderFactory,
});
loadTask.promise
  .then((pdf) => {
    this.pdfUrl = url;
    this.numPages = pdf.numPages;
  })
  .catch((err) => {
    console.error("pdf 加载失败", err);
  });