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

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

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

<embed src="通知.pdf" type="application/pdf" width="100%" height="420px">

使用该标签会存在低版本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、引入、注册、基本使用示例

<template><pdf src="通知.pdf"></pdf>
</template><script>import pdf from 'vue-pdf'export default {components: {pdf}}
</script>

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

npm install vue-pdf-signature

2、基本使用示例：

<template><pdf src="通知.pdf"></pdf>
</template><script>import pdf from "vue-pdf-signature";export default {components: {pdf,CMapReaderFactory}}
</script>

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

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

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

/*** 文件流转换为url* @param {} data //文件流*/
export function getObjectURL(data) {var url = nullif (window.createObjectURL !== undefined) { // basicurl = window.createObjectURL(data)} else if (window.webkitURL !== undefined) { // webkit or chrometry {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时，只显示第一页，可以通过循环解决：

<pdf:src="pdfUrl"v-for="i in numPages":key="i":page="i"
></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);});

使用vue-pdf-signature实现pdf预览相关推荐

前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
【aspose】 word/excel转pdf，实现在线预览文件功能
项目场景: 需求描述:上传附件后,可实现在线预览,这里就会存在一个问题,很多附件的类型是没法在线预览的,点击就会下载.除pdf/jpg/jpeg等,于是技术方案定,将word/excel等类型的文件转 ...
利用aspose实现ppt,doc,docx,pptx,xlsx,xls,txt,图片类型转pdf以及实现在线预览（可用于window和linux上，无水印）
声明:对于本文章上的这个aspose相关的jar,切勿用于商业用途,后果我概不负责 1,先准备jar 链接:jar连接提取码:bccn 下载后选中自己合适的我使用的jar,而我的环境是jdk1.8 ...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
office转pdf实现office在线预览（aspose）
office转pdf实现office在线预览(aspose) 1. jar包地址 2. 将jar包安装到本地 3. pom文件添加依赖 4. license.xml ① license.xml存放路径 ...
Android pdf填充表单,预览,图片填充,水印添加
前言需求是这样的,客户需要用户登录app后录入个人信息,然后由手机端帮助将录入的信息填充到pdf, 用户录入的部分图片需要填充到pdf模板的最后面,还需要给每一页pdf都加上水印,生成后给用户预览 ...
pdf,word,ppt在线预览
pdf,word,ppt在线预览先展示下效果 pdf跟ppt的预览效果: word的预览效果实现过程-只需一个iframe标签即可详细介绍请看这里 <iframe src="ht ...
使用libreoffice将office文档（word、ppt、excel）转pdf，实现在线预览
项目需要实现局域网预览office文档的功能,之前做的在线项目,都是将文档上传到cdn,利用cdn自带的转码功能,把文档转换为pdf,然后再用pdf.js实现在线预览. 因为是局域网,没有办法上传到c ...
前端实现docx、pdf格式文件在线预览
介绍在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-previe ...
【教程】PDF组件Spire.PDF 教程：在C＃中显示PDF文件的打印预览
本文演示如何使用Spire.PDF和c#在Windows窗体应用程序中显示PDF文件的打印预览. 在使用下面的代码之前,我们需要创建一个Windows窗体应用程序,在窗体中添加一个PrintPrevi ...

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

使用vue-pdf-signature实现pdf预览相关推荐

最新文章

热门文章