vue如何查看预览pdf文件但不下载

最新推荐文章于 2024-05-10 10:41:04 发布
最新推荐文章于 2024-05-10 10:41:04 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： 样式笔记 文章标签： vue.js html vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45682701/article/details/124348034
版权

1.安装vue-pdf

npm install --save vue-pdf

2.vue文件中引入

	import pdf from "vue-pdf";
  	export default {
		components: { pdf },
	}

3.页面使用

<pdf ref="pdf" :src="esignDocUrl" rotate="0" ></pdf>
爱吃虾尾吗
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-pdf预览pdf文件流示例
12-26
vue-pdf预览pdf文件流示例
后端返回的PDF文件，前端如何新开一个窗口打开预览，不能直接下载
最新发布
qq_42267338的博客
05-10 212
话不多说，直接上代码。
vue中如何实现pdf文件预览的方法
10-18
主要介绍了vue中如何实现pdf文件预览的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-pdf预览pdf文件流
01-13
在vue中引入vue-pdf插件预览pdf文件流
关于vue在线预览pdf
qq_41704417的博客
03-31 552
但是但是但是,看了网上的案例各种坑!也可能是我引用的方式不对,最后自己琢磨出来了。一下 无所谓版本。好了 就就这样 拜拜。
PDF在线预览插件屏蔽打印 下载操作
08-23
PDF在线预览插件屏蔽下载与屏蔽打印功能,进行源代码的修改，杜绝非法用户进行PDF文件的下载与盗取操作。可以进行文件流实现PDF在线预览。 针对当前盖章签名的pdf 可以进行正常预览。 pdf.worker.js viewer.js 进行修改 并且进行重新编译。
vue集成pdf.js访问阿里云链接实现在线预览pdf 同时禁止打印下载
weixin_45751725的博客
09-17 2426
vue集成pdf.js
a标签无法下载pdf文件，只能预览时的解决方法
solitude1128的博客
07-11 1561
最后解决办法是，用http请求文件，接口返回文件流，前端处理后，就可以下载了。可能的问题有很多，我遇到的问题是域名不同，所以只能预览，不能下载。但是很困扰我的一个问题是我用axios，给一样的参数就不能用。jq的ajax就没问题，有大神可以帮忙解答下吗？随便搞个html文件就可以试了。记得引入jq的在线链接。
vue：遇到的坑之----预览、下载文件
cWatermelon的博客
07-07 3705
预览： 后台返回文件流，前端通过pdf.js来实现文件预览。 pdf.js要修改的配置，其他博主都写的很详细了，我就不叙述了。就贴上预览的前端代码，更直观的看代码 1、点击预览，弹出预览对话框（通过iframe实现） html:这里的:src的值是固定要这么写的，不然pdf插件会找不到文件路径，因此预览不了 <el-button size="mini" @click="p...
vue前端预览pdf并加水印、ofd文件，控制打印、下载、另存，vue-pdf的使用方法以及在开发中所踩过的坑合集
热门推荐
zhangzuying的博客
06-21 1万+
根据公司的实际项目需求，要求实现对pdf和ofd文件的预览，并且需要限制用户是否可以下载、打印、另存pdf、ofd文件，如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单，直接调用浏览器的预览就可以而且功能也比较全，但是一涉及到禁止用户打印、另存的话就不可以用浏览器自带的预览方式了。那就只能寻找插件来模拟了，之前在eletron-vue项目中使用过pdfjs以及vue-pdf插件，效果不是特别好
Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）
s13596191285的博客
03-16 247
最近在做一个精品课程，需要在线预览课件ppt，我们的思路是将ppt转换为pdf在线预览，所以问题就是如何实现在线预览pdf了。在实现的过程中，为了更好地显示效果，我采用了多种不同的方法，最终选择效果最好的pdf.js。
vue 在线预览 pdf
m0_71902265的博客
11-20 919
vue 在线预览 pdf
vue用pdf.js实现对pdf浏览，并隐藏下载、打印
q249859693的博客
06-29 4602
vue用pdf.js实现对pdf浏览，并隐藏下载、打印
【Vue】vue2使用vue-pdf预览pdf文件，预览多页，在线预览方式二，vue页面内预览，无需额外pdfjs包，保姆级教程
qq_51055690的博客
09-12 6145
参考文章1vue中前端实现pdf预览（含vue-pdf插件用法）参考文章2vue中运用vue-pdf实现pdf分页预览及缩放(可解决pdf预览不清晰问题)可以先看参考文章，再来看我的，这个作者的简洁粗暴，上手就能用，我写的主要针对新手小白但是只做了预览，如果需要切换上一页、下一页，请看参考2提示：以下是本篇文章正文内容，下面案例可供参考更多方法看官网传送门。
基于若依前后端分离版（Springboot+Vue）的文件预览
qq_55896432的博客
04-06 8942
基于若依框架（springboot+vue）的文件预览
vue项目中实现预览pdf
博客简介
12-28 969
【代码】vue项目中实现预览pdf。
vue2项目中在页面中插入PDF在线显示
冬瓜的博客
05-13 1146
在vue2项目中在线页面查看PDF
vue预览pdf文件
09-08
在Vue项目中，可以使用pdf.js来预览pdf文件。有几种方法可以实现这一功能。 第一种方法是利用浏览器自带的预览功能，你可以通过在Vue组件中使用iframe标签来实现。在Vue组件中，你可以定义一个pdfUrl变量来存储pdf文件的地址，然后将该地址作为iframe标签的src属性值。这样，当Vue组件渲染时，iframe标签会加载并显示pdf文件。具体代码如下： ```html <template> <iframe ref="mainiframe" :src="pdfUrl" style="height:100%;width:100%"></iframe> </template> <script> export default { data() { return { pdfUrl: "http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" // 替换成你的pdf文件地址 }; } }; </script> ``` 第二种方法是利用pdf.js库封装一个Vue组件来实现在线pdf查看。你可以将pdf.js库引入到Vue项目中，并创建一个自定义的Vue组件来处理pdf文件的加载和显示。具体代码如下： ```html <template> <div> <canvas ref="pdfCanvas"></canvas> </div> </template> <script> import pdfjsLib from "pdfjs-dist"; export default { mounted() { this.loadPdf(); }, methods: { async loadPdf() { const pdfUrl = "http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"; // 替换成你的pdf文件地址 const pdf = await pdfjsLib.getDocument(pdfUrl).promise; const page = await pdf.getPage(1); const canvas = this.$refs.pdfCanvas; const context = canvas.getContext("2d"); const viewport = page.getViewport({ scale: 1 }); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; await page.render(renderContext); } } }; </script> ``` 以上是两种在Vue项目中预览pdf文件的方法，你可以根据自己的需求选择适合的方法来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue项目中预览pdf文件](https://blog.csdn.net/prey1025/article/details/90029284)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值