vue文件流转换成pdf预览(pdf.js+iframe)&&使用vue-pdf实现pdf预览

最新推荐文章于 2024-07-05 16:59:20 发布
最新推荐文章于 2024-07-05 16:59:20 发布
阅读量1.7k 收藏 8
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48469964/article/details/117566371
版权
本文介绍如何在Vue项目中预览后端返回的PDF文件流。通过两种方法实现：一是利用PDF.js将文件流转换为blob地址预览；二是使用vue-pdf组件直接显示PDF。详细步骤包括axios配置、静态资源放置、数据处理及组件引入。
摘要由CSDN通过智能技术生成
需求：后端返回文件流前端将文件流转为成blob地址预览pdf文件
两种方式：
1，PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端，生成blob地址预览

2，Vue-pdf: https://github.com/FranckFreiburger/vue-pdf 会出现空白页( 推荐使用iframe方法 )
一，官网(https://mozilla.github.io/pdf.js/getting_started/#download)下载PDFJS，注意放在static文件目录下，如果vue最新版本放在public文件中

在这里插入图片描述
在axios请求中设置响应类型,此方法是自己项目中封装的axios请求，可根据自己情况加这行代码

responseType: 'blob',

在这里插入图片描述

页面中使用
<
最低0.47元/天 解锁文章
乐YB
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue通过文件流预览pdf文件，并导出pdf文件
qq_52959651的博客
06-28 1595
首先下载vue-pdf npm install vue-pdf -D 然后直接看代码吧 完整代码如下 <template> <div> <el-button class="grid-button" type="success" plain size="small" @click="exportdata" >导出</
Vue+ElementUI使用vue-pdf实现预览功能
10-15
在Vue.js框架的项目中，使用vue-pdf插件可以非常方便地集成PDF文件预览功能。以下是从给定文件信息中提取出的关于实现Vue+ElementUI中使用vue-pdf实现PDF预览功能的知识点。 首先，要使用vue-pdf插件，需要通过npm...
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中服务端返回的流文件预览成pdf
m0_55881852的博客
06-20 437
vue中服务端返回的流文件预览成pdf
vue 实现 word/excel/ppt/pdf 等文件格式预览操作
最新发布
Rverdoser的博客
07-05 521
对于Word、Excel、PPT文件，可以考虑将它们转换为PDF或图片格式进行预览，或者使用第三方服务如Google Docs、Microsoft Office Online等。在Vue中实现多种文件格式（如Word、Excel、PPT、PDF等）的预览，可以使用第三方库或组件。注意：实际应用中可能需要考虑文件安全性、性能优化以及兼容性问题。来实现PDF文件的预览，其他格式可以通过相应的库或插件来实现。（用于Excel文件）或者通过调用后端API进行转换和预览。对于其他文件格式，可以考虑使用第三方库如。
vue-cli@3.0 axios将pdf二进制文件流转换成pdf文件
chenacxz的博客
04-08 5576
如果是本地pdf文件可参考https://blog.csdn.net/shentibeitaokong/article/details/80011900 pdf文件流可参考https://www.jianshu.com/p/242525315bf6 将以上两种结合在一起作为参考（通过引入pdf.js,iframe嵌入实现预览、打印功能） 首先去vue-pdf.js-demo，将pdf下的所需...
vue项目转化成html,vue项目转换成pdf文件（简单易懂）
weixin_35805266的博客
06-10 1020
1，添加两个模块html2canvas和jspdf(1)npminstall--savehtml2canvas(将页面html转换成图片)(2)npminstall--savejspdf(将图片生成pdf)2，创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf.js'),内容如下import html2Canva...
vue前端接收后端文件流生成pdf
qq_54126505的博客
10-28 2075
pdf
vue页面导出为pdf文件
weixin_45907435的博客
03-13 2104
在后台管理项目中，想到把页面导出为pdf格式的文件，可以使用html2canvas和jspdf 插件实现。
如何通过vue3和vite实现在线预览pdf功能，供大家学习研究参考
11-16
pdfjsLib.GlobalWorkerOptions.workerSrc = "./pdf.worker.js"; const loadingTask = pdfjsLib.getDocument(state.source); loadingTask.promise.then((pdf) => { state.numPages = pdf.numPages; }); }); ...
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
在Vue.js应用中，开发一个能够在线预览PDF文件的插件时，常常会遇到手机浏览器不支持直接预览的问题。在这种情况下，可以利用pdf.js库来解决这个问题。pdf.js是一个由Mozilla维护的开源库，它能提供跨平台的PDF文档...
vue-pdf预览pdf文件流
01-13
在vue中引入vue-pdf插件预览pdf文件流
word,excel,ppt文件转换成pdf文件
12-18
word文件，excel文件，ppt文件转换成pdf文件，java代码实现，已经集成为工具类，可以直接使用，自测ok
vue-pdf预览pdf文件流示例
12-26
在Vue.js应用中，预览PDF文件流是一个常见的需求，特别是在网页中展示来自服务器的数据或者动态生成的PDF文档。Vue-pdf库提供了解决这个问题的有效工具。这个库允许开发者在Vue组件中直接渲染PDF文件，无需将文件...
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
IT博客技术分享
04-21 4028
第一种是用： <iframe> 嵌套显示 先上效果图： 注：这种还带样式的是我后面修改源码的 js添加的 ： customToolbar.js //创建一个新样式 let sheet = (function() { let style = document.createElement("style"); style.appendChild(document.createTextNode("")); document.head.appendChild(st...
Vue导出PDF
qing___tian_的博客
10-13 1392
在Vue后台管理系统的构建时需要将部分网页内容导出为PDF下载可采用以下方法。
Vue项目中，利用iframe在线预览pdf/图片等
RumbleWx的博客
06-14 504
在components下新建 src/components/FilePreview/index.vue。在components下新建 src\components\iFrame\index.vue。
vue实现生成pdf文件
weixin_46182770的博客
12-29 6972
2 接着就是第一个方法exportReport，也就是按钮触发的方法，这个方法里面很简单，就获取了pdfDom这个盒子的dom对象，然后调用生成pdf的方法outPutPdfFn。至此一个简单的生成pdf功能就实现了，上述的方法基本都封装好了，使用上述的3个方法，只需要自己对需要生成pdf内容的盒子进行id的添加，将方法带入就可以了。1 首先template部分就是，给你要到处pdf内容的部分加上一个id标识，用于获取这个盒子的dom对象，如图我这里的id是pdfDom。
vue3中使用pdfjs-dist预览pdf，vue.config.js配置pdf文件
09-15
在vue3中使用pdfjs-dist预览pdf文件，需要进行以下配置： 1. 首先，在项目的根目录下找到vue.config.js文件，如果没有则可以手动创建。 2. 打开vue.config.js文件，添加以下代码： ```javascript module.exports = { chainWebpack: config => { config.module .rule('pdf') .test(/\.pdf$/) .use('file-loader') .loader('file-loader') .options({ name: 'assets/[name].[hash:8].[ext]' }) .end() } } ``` 3. 保存文件并重启项目。 4. 在你的Vue组件中，可以使用以下代码来引入pdf文件并预览： ```javascript import pdfjs from 'pdfjs-dist/build/pdf'; export default { data() { return { pdfData: null }; }, mounted() { const pdfPath = require('@/assets/example.pdf'); // 替换为你的pdf文件路径 pdfjs.getDocument(pdfPath) .promise.then((pdf) => { const pageNumber = 1; // 需要显示的页码 pdf.getPage(pageNumber).then((page) => { const canvas = this.$refs.pdfCanvas; // 替换为你的canvas元素的ref名 const context = canvas.getContext('2d'); const viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width; canvas.height = viewport.height; page.render({ canvasContext: context, viewport: viewport }); }); }); } }; ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值