要实现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);
});