资讯专栏INFORMATION COLUMN

Vue项目中使用基于pdf.js的vue-pdf插件在pc浏览器下阅览PDF文件

Martin91 / 2833人阅读

摘要:最近项目中需求为在浏览器上阅览格式的文件,之前没有写过,随即上网查阅,发现大家常使用的为两个插件。不过我迁移到公司项目的时候遇到一个坑,引入这个插件的时候就会报错,后来查询资料发现这篇文章,问题才得已解决,感谢作者。

最近项目中需求为在浏览器上阅览PDF格式的文件,之前没有写过,随即上网查阅,发现大家常使用的为两个插件。
其一是火狐出品的pdf.js,github地址:https://github.com/mozilla/pd...;
其二是PDFObject,额,不太清楚作者,github地址:https://github.com/pipwerks/P...。
前者功能强大,社区活跃,后者是基于jquery封装出来的插件,要是在vue中混着jquery总感觉怪怪的,所以我选择了前者。
又看了一下有没有轮子可用,诶嘿,vue-pdf,github地址:https://github.com/FranckFrei...。看了文档,可取。
首先下载插件(建议先新建一个demo出来跑,直接撸到开发项目中...出什么幺蛾子...)

// 我使用的是yarn npm的话 npm install vue-pdf --dev
yarn add vue-pdf --dev

然后在vue文件中引入使用,建议新建一个vue文件二次封装



之后就可以愉快的玩耍了。

不过我迁移到公司项目的时候遇到一个坑,引入这个插件的时候就会报错window is not defined,后来查询资料发现这篇文章,问题才得已解决,感谢作者。https://blog.csdn.net/u010745...

只需要在webpack中设置如下

module.exports = {
  // 请忽视这无关的代码
  output: {
    globalObject: "this"
  }
  // 请忽视这无关的代码
}

以上。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102283.html

相关文章

  • vue使用 pdf.js 预览 和 打印 PDF文档 兼容React

    摘要:我使用前端开发框架是有一个打印文档的需求这个需求最开始是交给后台但是明显不切实际因为后台服务器根本就无法连接打印机所以这个预览加打印文档的需求就交到了前端开始我有想过直接打开文件但事实上直接打开文件的表现不太好如果是在的环境下会直接下载文件 我使用前端开发框架是vue,有一个打印PDF文档的需求.这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机.所以这...

    vvpvvp 评论0 收藏0
  • VueJs项目笔记

    摘要:知识点总结一实现页面的缓存二移动端固定定位的解决方案三表单校验表单验证中文文档横向滑动的选项卡,以及输入法定位相关的插件网当第一个输入框自动获得光标的时候,弹出的输入法会把布局顶上去问题可以左右滑动的将项目中引入框架和插件当第一个输 ======================知识点总结=========================== 一、keep-alive(实现页面的缓存) ...

    iliyaku 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高胜山 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    shusen 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<