vue中使用PDF.js

置顶 已于 2022-03-19 10:27:40 修改
阅读量1.3w 收藏 16
点赞数 4
分类专栏： PDF.js 文章标签： vue.js javascript 前端
于 2022-01-24 08:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37296026/article/details/122540457
版权

PDF.js

1、下载PDF.js

下载地址http://mozilla.github.io/pdf.js/getting_started/#download

这里提供了3中形式，我们这里选择第一种形式。
在这里插入图片描述

  • 压缩包中内容
    在这里插入图片描述
  • build文件夹中
    在这里插入图片描述
  • web文件夹中
    在这里插入图片描述
    我们要用到的就是web文件夹中的viewer.html

2、Vue项目中引入

  • 在static文件夹中新建pdf文件夹，如下
    在这里插入图片描述
  • 在components文件夹中新建pdf文件夹，如下（可根据自己项目实际结构改动）
    在这里插入图片描述
  • pdf-index.vue中
    在这里插入图片描述
  • pdf-index.js中（vue组件写法，不深入）
    在这里插入图片描述

3、Vue项目中使用

  • 使用页面引入（注意事项：pdfSrc需要使用encodeURIComponent方法转义）
    在这里插入图片描述
    在这里插入图片描述
  • 展示效果
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8qzNMzS-1642403454960)(.\pdf11.jpg)]
vue中使用pdf.js展示pdf文件
qq_41225246的博客
06-17 1129
在vue中使用pdf.js如何使用显示方式出现的问题 如何使用 首先去官网下载压缩包，解压后放在vue项目的public文件夹下，不然找不到 然后就可以在组件中使用了 显示方式 打开新页面显示pdf文件，直接在a标签上引入public下的viewer.html文件，file表示你的pdf的地址 template中的代码 // 直接通过/路径引入，vue中/路径就是public下的文件，此处的href用了vue的属性绑定，使用url变量 <a target="_blank" :href="'/p
Vue3 使用pdf.js 预览pdf
m0_54849873的博客
03-09 855
Vue3 使用pdf.js 预览pdf 非专业 如有语术错误请谅解 写在前面：vue-pdf 好像并不支持Vue3 参考https://segmentfault.com/a/1190000039858927 本样例是基于后端返回的是文件流 直接上样例 首先下载pdf.js 注意：将解压后的文件放在static下 1.使用ifame嵌套 <iframe id='pdf' ref='pdf' height='100%' :src='pdfUrl'
vue中使用pdf.js
农民工
11-17 1732
vue中使用pdf.js。
vue中pdf.js的使用，包括pdf显示，跳转指定页面，高亮关键词
最新发布
qq_60654563的博客
12-06 2203
里面有很多的版本， 高版本的可能浏览器不兼容或者还要考虑手机上面的，最好下载低版本的，这里是v2.16.105版本。出现这个错误就是跨域的问题，找到pdfjs/web/viewer.js文件，注销跨域代码就可以。利用 web里面的viewer.html就可以直接打开pdf,里面有默认的一个pdf文档。在本地static里面创建文件夹pdfjs，然后将下载包里面的文件放进pdfjs。根据pdf.js内置函数，可直接修改当前页面，没有太大的跳动，利用Iframe。比如按照以上步骤方法为。
vue使用pdfjs
温润如风的博客
05-11 1万+
前言：在项目开发过程中，可能会遇到在线预览pdf的功能，我就遇到了，期间真是一把心酸一把泪啊，最终把可以使用的结果记录下来，以便后面少采坑。 一、vue使用pdfjs 1、下载pdfjs 我把插件文件上传到csdn上了，下载地址 2、把下载的文件放到static下 我把文件放到了static/plugins/pdf下了，具体的位置可以自行调整 3、新建一个templete模板 模板中加入以下内容，获取到的pdf文件是以流的形式返回给插件的 html内容如下 <template> <d
vue3中使用pdf.js、实现移动端、PC端的PDF预览、支持绝大部分情况
qq_40893035的博客
10-11 5736
之前一直使用的pdf.js+canvas的形式预览PDF，但是这有一个很大的弊端，就是canvas生成的图片太糊了，而且本质上这渲染的根本不是pdf，而是一张图片，很多pdf中带有的功能这里都不能实现。我的理解是，在手机端使用手势缩放放大缩小pdf后，出现了错乱的情况，这时候我再手动调用一下源码中自带的。我在源码中加了一个被我隐藏的按钮，并为其添加点击事件，在缩放完成后，调用点击事件，完成pdf的更新。抛砖引玉，我这个方法虽然可以解决，但是太僵硬了，为了解决而解决，肯定是有更好的办法的。
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
12-07
为了在Vue项目中使用这个组件，你需要在父组件中导入并注册`pdf.vue`，然后调用`showPDF`方法，传入PDF文件的URL，如： ```html <pdf :pdf-url="pdfUrl"></pdf> import Pdf from './components/pdf.vue'; ...
vue 中使用print.js导出pdf操作
01-21
1.print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint'...
在uni-app中使用pdf.js实现在手机上打开pdf
11-04
在uni-app中实现PDF在手机...总之，在uni-app中使用PDF.js实现手机上打开PDF，需要完成引入PDF.js库、加载PDF文档、渲染页面及处理用户交互等步骤。通过以上方法，你可以在uni-app的各个平台上提供流畅的PDF查看体验。
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 使用 PDF.js 浏览pdf文件
shaoyahu的博客
12-27 6109
很头大 , 本来网络实际地址的 pdf 文件直接放在 iframe 的 src 中就可以浏览 pdf 文件的 , 但是对于虚拟地址来说 , 这样子只会让网页当场开始下载 pdf 文件到本地 , 而并不能在网页上浏览所以我赶紧网上搜罗搜罗 , 看看大家有什么好办法 , 并且记录下来 .这里用的是 PDF.js 这个库 , 最后有组件的代码文件链接。
vue使用pdf.js
100%纯可可的博客
01-15 506
vue使用pdf.js 1.下载pdf.js 链接：http://mozilla.github.io/pdf.js/getting_started/#download 2. 解压后将文件放置项目public目录下 3. 项目中使用pdf.js的方法 注：此处用的iframe标签在页面内打开，可用a标签单独弹一个页面（根据项目需求而定）。 ...
vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容
葫芦娃y的博客
03-25 3876
vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容
vue用pdf.js实现对pdf浏览，并隐藏下载、打印
q249859693的博客
06-29 5174
vue用pdf.js实现对pdf浏览，并隐藏下载、打印
vue使用pdf.js预览pdf文件
weixin_46044574的博客
07-20 2297
pdf.js
【PDF.js】2023 最新 PDF.js 在 Vue3 中的使用
热门推荐
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-21 2万+
官方地址中文文档PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。pdf.js 是社区驱动的，并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。
vue3项目使用pdf.js插件实现：搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流
wang13679201813的博客
04-14 2万+
官网下载地址：https://mozilla.github.io/pdf.js/getting_started/#download.1、使用pdfjs已经写好的viewer.html页面。下载后将pdf.js 放到服务器上 如：http://xxxx:8080/static/pdfjs。这种方法需要从官网上将pdf.js包下载下来。pdf.worker.js:负责核心解析。通过插件docx-preview实现。2、将PDF文件渲染成Canvas。pdf.js: 负责API解析，
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值