【vue2中的pdf预览】iframe/pdf.js/vue-pdf

这篇具有很好参考价值的文章主要介绍了【vue2中的pdf预览】iframe/pdf.js/vue-pdf。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

vue2中预览pdf的方法有pdf.js和vue-pdf等。下面进行简单对比&使用方法的介绍。

正文

直接使用iframe预览pdf

使用iframe预览pdf
如果后端返回的不是url,那么需要使用responseType = 'blob'来读取后端传来的内容。

扩展:

  • 同样是使用iframe进行预览,如果有其他格式如word/xls/ppt/txt的文件需要预览,可以使用微软解析地址的url进行预览。
    注意:文件地址是公网可打开的;控制的只是src地址
    微软解析地址:https://view.officeapps.live.com/op/view.aspx?src=你的文件地址
    参考:vue预览 pdf、word、xls、ppt、txt文件方法
  • 常见问题的解决
    参考:PDF预览完整解决方案及各种兼容(VUE版)
    • 缓存问题:利用iframe打开pdf后,当再次利用iframe打开另一个pdf时会显示第一份pdf,原因是浏览器对url的缓存处理。
      解决办法:给url加时间戳或随机数,这样就没有缓存问题了。
      const fresh=new Date().getTime();//时间戳 this.url = this.url+'?'+ fresh; // 初始化查看pdf应用地址
    • 使用base64url问题:有些pdf的url采用base64格式,直接将base64格式url放进src中可能会报错导致显示不了。原因是base64地址太长,浏览器不支持。
      **解决办法:**利用Blob转base64url成文件路径.
      css复制代码 var bstr = window.atob(_this.baseUrl); //解码 var n = bstr.length; var u8arr = new Uint8Array(n);

使用pdf.js+iframe预览

相比起直接使用iframe预览,功能更加强大,支持更多自定义的功能。
比如:

  1. 自定义样式:使用 PDF.js,你可以更灵活地自定义 PDF 文件的样式。你可以修改文字的颜色、字体大小、行间距等,以满足特定的需求。
  2. 高级功能:PDF.js 提供了许多高级功能,例如缩放、旋转、搜索、导航目录等。这些功能在直接使用 iframe 时不可用。
  3. 高级操作:使用 PDF.js,你可以实现更高级的操作,如添加注释、书签、水印等。这些操作在直接使用 iframe 时无法实现。
  4. 兼容性:PDF.js 可以在大多数现代浏览器中正常工作,因此可以提供更好的兼容性,以确保用户可以在各种设备和浏览器上正确显示和操作 PDF 文件。
  5. 定制性:PDF.js 是一个开源项目,可以根据项目需求进行二次开发和定制。你可以根据具体需求修改源代码,以满足特定的业务需求。
    详细|vue中使用PDF.js预览文件实践包括如何注释代码以解决跨域问题。

PDF.js使用总结包括一些api列举。

扩展

vue项目,npm install方式使用pdfjs 这里不是使用iframe的,而是直接渲染内容,手动写翻页的按钮或其他功能。有完整代码。
pdfjs-dist web预览pdf文件, pdfjs-dist example 也是使用npm方式使用pdf.js的。包括对比vue-pdf的优劣,和vue.config.js的配置,有完整代码。

npm install方式使用pdf.js: 需根据需求自己写样式,实现相关功能。

以静态资源方式使用(就是本文章前面的用法): 将pdf下载到本地项目中,以静态资源方式使用,通过 pdf.js 提供的 viewer.html
文件来展示服务器上的pdf文件,无须自己设置样式(已有pdf.js的全套样式和相关功能,不需要的地方可通过更改源码等方式自行去掉)

vue-pdf

vue-pdf是基于pdfjs-dist插件的vue封装。
PDF预览完整解决方案及各种兼容(VUE版)可以参考的简略版的使用方法和常见问题解决。

vue-pdf 一个基于vue的pdf预览插件(vue2.x)这个封装了一个有分页显示功能的完整代码,可以参考,整体使用的逻辑比较清晰。

扩展

vue实战–vue+elementUI实现多文件上传+预览(word/PDF/图片/docx/doc/xlxs/txt) ;可以参考的封装思路和功能,有完整代码和图示。预览还是用的https://view.officeapps.live.com/op/view.aspx?src=${data}文章来源地址https://www.toymoban.com/news/detail-700104.html

到了这里,关于【vue2中的pdf预览】iframe/pdf.js/vue-pdf的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端使用vue-pdf、pdf-lib、canvas 给PDF文件添加水印,并预览与下载

    原理就是给显示pdf 的容器增加一层水印遮罩层 下载: 通过url获取pdf文件的arrarybuffer文件流 将arraybuffer数据转成pdf文档 添加水印字体(内置/自定义) 为每页pdf添加文字水印 保存pdf文件的unit64Arrary文件流 预览: 创建canvas容器(用于显示水印文字) 创建水印canvas 将水印canv

    2024年01月24日
    浏览(59)
  • vue-pdf多页预览异常,Rendering cancelled, page 1 Error at BaseExceptionClosure xxx

    项目开发使用vue-pdf,单页情况预览正常,多页vue-pdf预览异常,第一次预览时,会先弹出异常模态窗口,关闭模态窗口,pdf又是正常显示,报错信息及异常截图如下: 异常截图,点击右上角关闭X,pdf是正常预览,再次打开后也能正常预览,仅第一次打开预览有异常。 1.vue-pdf预

    2024年02月07日
    浏览(43)
  • vue前端预览pdf并加水印、ofd文件,控制打印、下载、另存,vue-pdf的使用方法以及在开发中所踩过的坑合集

    根据公司的实际项目需求,要求实现对pdf和ofd文件的预览,并且需要限制用户是否可以下载、打印、另存pdf、ofd文件,如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单,直接调用浏览器的预览就可以而且功能也比较全,但是一

    2024年02月16日
    浏览(172)
  • vue3 实现预览pdf的几种方式(vue3-pdf, iframe流展示,vue-office/pdf)

    功能描述: 要实现菜单(二级)绑定文件,并进行预览(点击菜单即触发),支持文件上传下载(绑定菜单),文件以byte[]形式保存到数据库(至于为什么不用文件存储系统,因为这是领导定的 =,= 而且这个功能比较小,数据也不多,成本有限),同时,要解析pdf文件里的内

    2024年02月16日
    浏览(52)
  • 【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件

    【Vue】vue2预览显示quill富文本内容,vue-quill-editor回显页面,v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件 提示:这里可以添加本文要记录的大概内容: vue

    2024年02月07日
    浏览(47)
  • vue2实现二进制流pdf浏览器预览功能

    该方法不需要使用插件  获取后端二进制文件流后直接处理 然后点击调用方法使用

    2024年01月20日
    浏览(62)
  • vue2 pdfjs-2.8.335-dist pdf文件在线预览功能

    1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载,复制到public文件夹下. 2、在components下新建组件PdfViewer.vue文件 3、在el-upload 中调用 pdf-viewer 组件 4、在el-upload 中的 on-preview方法中加上对应的src路径  internalPreview(file) { //判断需要预览的地方加 props—pdfView                

    2024年01月19日
    浏览(47)
  • 【vue2】纯前端实现本地的pdf/word/epub文件预览

    需求是预览本地的pdf/word/epub格式的文件,但是搜索后发现没有可以直接使用的,格式不同,显示的方式和效果也都略有不同。 最后还是 分别实现预览 的功能。 如果只需要预览pdf/word等格式的话,可以使用的方案:vue-office,支持多种文件(docx、excel、pdf)预览的vue组件库,支持

    2024年02月11日
    浏览(74)
  • Vue中 引入使用 patch-package 为依赖打补丁 (以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例)

    1. patch-package 简介 patch-package npm地址 patch-package github文档 如果不需要在生产中运行 npm (如:正在制作 web 前端,则可使用 --save dev) 1.2 使用方法 制作修补程序 首先更改 node_modules 文件夹中特定包的文件,然后运行 或使用 npx (npm 5.2) package-name 与所更改的程序包的名称相匹配

    2024年02月10日
    浏览(46)
  • 使用iframe预览pdf

    本文主要介绍使用iframe预览pdf的功能,以及iframe预览报错问题和iframe未能加载PDF文档。 预览自带分页、下载、旋转、比例等功能。 一、iframe是什么? iframe的介绍:将src的内容规定在 中显示出。 iframe既可以用来预览本地static下的文档,也可以预览后端返回的文件流文档 二、

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包