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

最新推荐文章于 2024-05-16 10:48:51 发布
最新推荐文章于 2024-05-16 10:48:51 发布
阅读量1.7k 收藏 8
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48469964/article/details/117566371
版权
需求：后端返回文件流前端将文件流转为成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+ElementUI使用vue-pdf实现预览功能
10-15
主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何通过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; }); }); ...
前端实现pdf预览
weixin_45371730的博客
06-30 9093
前端实现pdf预览
使用iframe预览pdf；
热门推荐
i_am_a_div的博客
09-30 1万+
使用iframe预览pdf，iframe预览报错
Vue 采用blob下载后端返回的pdf流或者excel流文件乱码问题解决方案_blob pdf
最新发布
2301_82244509的博客
05-16 391
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】打开或者预览全是乱码。解决办法：1. 后端接口返回的blob文件流，你下载下来的文件是乱码的？解决办法 ：让你的后端设置流的编码为utf-8。请跟后端大佬说，一定要给blob格式的文件流。2. 后端返回的blob文件流，并且已经设置了utf-8,但是你接受的接口返回值，依然是乱码？
怎么把做好的ppt转换成pdf文件
把ppt转换成pdf
05-19 874
有时候需要将已做好的PPT文档转换成一份PDF格式，以方便传阅。PPT容易编辑好制作。PDF阅读方便，适应各种平台。所以这两种文档格式之间的转换也是常见的。那么如何将PPT转换成PDF。如果我们想从PPT文件中提取或或直接转换成PDF最快捷地方法就是运用专门的PPT转换成PDF转换工具进行格式转换。 　　网上有很多的软件许多转换出的文件都或多或少有些问题，有些根本无法完成转换。在试过很多转换
前端如何预览pdf文件流
valsedefleurs的博客
05-23 8547
通过查找资料，可以找到如下几种方案，其中最为成熟的方案是vue-pdf1. iframe 既可以用来浏览本地static下的文档，也可以预览后端返回的文件流文档2. vue-pdf 较为完善的vue预览pdf的方案3. vueshowpdf 网络上找到的一个他人封装的pdf组件优点vue-pdf总结下来，简单在页面嵌套PDF样式没有定制化vueshowpdf权限控制，样式定制需求高vue-pdf。
内嵌 iframe 实现PDF预览
想好了再写！
07-04 3032
【代码】内嵌 iframe 实现PDF预览。
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
在Vue.js应用中，开发一个能够在线预览PDF文件的插件时，常常会遇到手机浏览器不支持直接预览的问题。在这种情况下，可以利用pdf.js库来解决这个问题。pdf.js是一个由Mozilla维护的开源库，它能提供跨平台的PDF文档...
vue-pdf预览pdf文件流
01-13
这个插件是基于PDF.js库构建的，PDF.js是由Mozilla维护的一个开源项目，用于在浏览器中呈现PDF文件，而`vue-pdf`则是将其包装成适用于Vue的组件形式。 首先，我们需要安装`vue-pdf`插件。通过npm或yarn可以轻松完成...
Vue页面生成PDF的最佳方法推荐
lishuaihao的博客
08-10 8224
最近项目有个需求，将系统统计的数据生成分析报告，然后可以导出成PDF。这种方法可以有两种，一种是直接调用打印，用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差，且体验不好，显然不是我们想要的效果。那么第二种方法的实现思路是什么呢？首先生成报告页面，也就是常规页面；然后将页面转换成图片（ 用到的组件 html2canvas ）；最后将图片导出成PDF（ 用到的组件 jspdf ）。...
vue使用iframe预览 pdf、word、xls 文件方法
QwQ621的博客
09-05 3966
【代码】vue使用iframe预览 pdf、word、xls 文件方法。
【vue2中的pdf预览】iframe/pdf.js/vue-pdf
记录
09-05 2957
vue2中预览pdf的方法有pdf.js和vue-pdf等。进行简单对比&使用方法的介绍。
Vue 如何将网页转换成PDF实现步骤以及问题解决：
weixin_54515240的博客
03-03 7047
vue/vue3 中如何将页面转换成pdf，并且解决pdf清晰度和文件大小问题
vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载，以及uniapp中文件包（文件流）的下载处理
weixin_50450473的博客
09-07 5408
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~2、页面调用，client 中相关的属性需要自己去配置。1、安装 ali-oss。3、哪里需要哪里调用。
vue项目不用vue-pdf还可以用iframe简单实现预览pdf
weixin_44738844的博客
05-06 1084
我的vue2项目安装了vue-pdf要报错，感觉是node版本的问题，我就找了其他的办法，使用iframe也可以简单时间pdf文件的预览，其中预览自带分页、下载、旋转、比例等功能，能够满足基本需求。重点：接口封装部分响应类型设置为blob，默认为get请求方法，但是写在js文件中axios.get又会报错。实现过程为，首先通过id从后端获取文件流，把它转成url，然后赋值到iframe的src上。at eval也是上面代码错误的原因，没有识别到响应类型是blob。index.vue文件js部分。
vue 将base64 的pdf文件流转换成pdf并预览
聆听
07-30 2597
1、安装依赖： npm install vue-pdf --save-dev 2、代码 <template> <div class="main"> <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf> </div> </template> <script> //引入vue-pdf
【学习记录20】vue使用blob流预览word ，Excel，pdf，TXT，图片，视频
wenhui的博客
08-12 1万+
TXT，PDF直接使用浏览器本身预览excel使用插件 xlsx，这个插件需要用到arraybuffer的流格式，我是使用前端转换的详见js代码，也可以叫后台返回arraybuffer的数据流word 使用插件 docx-preview话不多说直接上菜，css样式自己调就行。.........
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、付费专栏及课程。

余额充值