vue中预览pdf的方法

使用vue-pdf

备注:这里只介绍了一页的pdf

js 复制代码
<div class="animation-box-pdf">
   <pdf :src="'http://xxxx'" />
</div>

import Pdf from 'vue-pdf'
// src可以是文件地址url,也可以是文件流blob(将blob转成url)
// let url = window.URL.createObjectURL(blob);

使用这种方式的缺点,src的地址切换,文档可以不会刷新为最新的内容,解决方法是在每次预览前清空url地址

pdf带有电子签章的,就是红章,预览不会生效

解决预览签章的问题

使用vue-pdf-signature

这个插件是基于vue-pdf修改的能预览电子签章的

js 复制代码
<div class="animation-box-pdf">
   <pdf :src="'http://xxxx'" />
</div>

import Pdf from 'vue-pdf-signature'

自己去github上克隆vue-pdf的源码,注释掉不允许显示签章的代码,然后打包发布到自己的npm上去,然后安装自己的npm包

自己去把pdfjs-dist包拉下来,改代码打包,把打包后的内容放到项目目录下,引用这个地址

使用iframe

js 复制代码
<iframe :src="http://xxx/xxx.pdf`" style="width: 100%;height: 100%;" frameborder="0"></iframe>

iframe预览会使用浏览器自带的预览窗口,如果不需要工具栏的话,可以在src地址后面添加#toolbar=0

如果想要让pdf占满整个容器宽度,需要设置#view-FitH,top,自适应页面大小。

跳往特定页数page=2

设置默认缩放比例,地址栏后添加#zoom=200

默认侧边栏工具栏处于关闭状态navpanes=0

js 复制代码
<iframe :src="http://xxx/xxx.pdf#toolbar=0&#view-FitH,to`" style="width: 100%;height: 100%;" frameborder="0"></iframe>

使用pdfjs+ iframe


pdfjs-2.6.347-es5-dist

pdfjs的包放在public目录下

js 复制代码
<iframe :src="`/pdfjs-2.6.347-es5-dist/web/viewer.html?file=http://xxx/xxx.pdf`" style="width: 100%;height: 100%;" frameborder="0"></iframe>

使用embed

js 复制代码
<embed :src="`http://xxx/xx.pdf`" width="100%" height="100%" type="application/pdf">
相关推荐
RaidenLiu12 分钟前
告别繁琐:用 Signals 优雅处理 Flutter 异步状态
前端·flutter·前端框架
星链引擎15 分钟前
面向API开发者的智能聊天机器人解析
前端
前端Hardy16 分钟前
HTML&CSS&JS:纯前端图片打码神器:自定义强度 + 区域缩放,无需安装
前端·javascript·css
道可到22 分钟前
35 岁程序员的绝地求生计划:你准备好了吗?
前端·后端·面试
道可到32 分钟前
国内最难入职的 IT 公司排行:你敢挑战哪一家?
前端·后端·面试
jnpfsoft33 分钟前
低代码应用菜单避坑指南:新建 / 删除 / 导入全流程,路由重复再也不怕!
前端·低代码
Keepreal49633 分钟前
word文件预览实现
前端·javascript·react.js
郝开33 分钟前
5. React中的组件:组件是什么;React定义组件
前端·javascript·react.js
我是天龙_绍34 分钟前
uniapp 中的 #ifndef 条件编译
前端
white-persist36 分钟前
SQL 注入详解:从原理到实战
前端·网络·数据库·sql·安全·web安全·原型模式