vue项目中预览pdf文件

最新推荐文章于 2024-09-25 21:00:00 发布
最新推荐文章于 2024-09-25 21:00:00 发布
阅读量845 收藏 1
点赞数
分类专栏： vue 文章标签： Vue PDF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ma_pei/article/details/97396268
版权

参考：https://blog.csdn.net/prey1025/article/details/90029284
最近做项目，需要在项目中预览PDF文件，就百度了一下，找到了一个比较简单的方法

1、在官网上下载pdfjs文件
链接地址： http://mozilla.github.io/pdf.js/getting_started/#download
2、将下载的文件放在项目的static文件夹中
在这里插入图片描述
3、在需要浏览PDF的组件中写入

pdfUrl在data中定义的，是pdf文件路径

在这里插入图片描述完成之后就可以预览pdf文件
（这个是引入项目同目录的PDF文件）
在这里插入图片描述

ma_pei
关注
专栏目录
js实现网站预览PDF文件
04-14
js实现网站预览PDF文件
vueshowpdf 移动端pdf文件预览
qq_40007317的博客
09-14 1249
vueshowpdf 移动端pdf文件预览
vue-pdf 实现pdf预览、高亮、分页、定位功能
最新发布
qq_42033668的博客
09-25 1741
vue-pdf 实现pdf预览、高亮、分页、定位功能（基于vue2.0！！！ ） 找了一圈 vue-pdf 高亮，举步维艰，只能自己实现了 效果图： 2.示例代码 参考：vue 使用 vue-pdf 实现文件在线预览.md 4.分页高亮 PdfPageViewer.vue 5.跳转指定页面并高亮（不分页） PdfViewer.vue 子组件（不分页需用到） 参考 vue 使用 vue-pdf 实现文件在线预览.md如果需要实现高亮需要增强 \node_modules\vue-pdf\sr
实现Vue移动端的PDF预览
only_zing的博客
02-03 7432
Vue 实行PDF预览以及遇到的问题
vue3移动端实现pdf预览
qq_43614064的博客
01-11 3198
然后就加载出来了，最后在各个环境测试的时候又发现，微信小程序里面打开这个模块，pdf还是没加载出来，console之后发现请求401，报错信息是登陆访问超时，发现pdfjs加载pdf时没有携带token。用了第二种插件后，苹果手机还是加载不出来，后面查到因为pdfjs-dist有时候会出现部分手机比如iphone6和iphone8渲染不出pdf问题。，安卓手机可以正常显示，于是换成了第二种方法。我一开始使用的时第一种方法，然后测试之后发现。遂，在加载url时添加token即可。添加之后就加载出来了。
移动端vue2使用vue-pdf当前页面预览
weixin_64740434的博客
06-09 1241
1.初始使用iframe总觉得很丑,于是进行改进PDF预览方式,这是使用了vue-pdf的预览。2.此代码是直接一次性展示全部文件,文件内容多时,存在很长时间的加载空白问题。
vue-pdf预览pdf文件流
01-13
在Vue.js应用中，预览PDF文件流是一个常见的需求，特别是在处理在线文档或者需要展示PDF内容的场景下。`vue-pdf`是一个强大的插件，它允许我们在Vue组件中轻松地集成PDF预览功能。这个插件是基于PDF.js库构建的，PDF...
vue实现在线预览pdf文件和下载（pdf.js）
10-15
最后，通过在Vue CLI 3.0创建的项目中放置pdf.js，并在Vue组件中引用它，可以实现在线预览PDF文件和下载的功能。需要注意的是，本文所提到的技术实现是基于Vue.js框架的，对于不熟悉Vue.js的开发者，需要先掌握Vue....
vue中如何实现pdf文件预览的方法
10-18
通过在Vue组件中使用这个库，可以读取PDF文件并将其内容渲染到一个`<canvas>`元素中，从而无需下载即可在页面上预览PDF文件。 具体实现步骤如下： 1. 首先需要安装`pdfjs-dist`库到项目中，通过npm命令进行安装： ...
vue项目想预览pdf文档的使用方法和代码
05-24
在Vue项目中预览PDF文档是一项常见的需求，尤其在前端开发中。为了实现这一功能，我们可以使用`vue-pdf`库，这是一个基于PDF.js的Vue组件，可以方便地在Vue应用中展示PDF文件。以下是关于如何在Vue项目中预览PDF文档...
vue-pdf预览pdf文件流示例
12-26
通过这种方式，vue-pdf库可以帮助我们在Vue项目中轻松预览PDF文件流，提供了良好的用户体验，且无需将文件下载到本地。同时，它还支持多种定制选项，如缩放、书签和链接等，可以满足各种复杂的需求。
PDF.js, 支持移动端电脑端PDF查看的浏览器控件
03-05
电脑端与移动端均支持，可以查看PDF文档并对文档进行控制，非常好用的控件。
vue 移动端app预览和保存pdf踩坑
jifashihan的博客
02-28 2266
使用Vue开发h5，嵌套到Android和IOS的Webview里，需要实现pdf预览和保存功能，预览pdf的功能，我这边使用了三个库，pdf5，pdf.js，vue.pdf，现在把这三个库在app端的坑分享一下。先说预览的，保存的实现等会再说。
vue3中使用pdf.js、实现移动端、PC端的PDF预览、支持绝大部分情况
qq_40893035的博客
10-11 4560
之前一直使用的pdf.js+canvas的形式预览PDF，但是这有一个很大的弊端，就是canvas生成的图片太糊了，而且本质上这渲染的根本不是pdf，而是一张图片，很多pdf中带有的功能这里都不能实现。我的理解是，在手机端使用手势缩放放大缩小pdf后，出现了错乱的情况，这时候我再手动调用一下源码中自带的。我在源码中加了一个被我隐藏的按钮，并为其添加点击事件，在缩放完成后，调用点击事件，完成pdf的更新。抛砖引玉，我这个方法虽然可以解决，但是太僵硬了，为了解决而解决，肯定是有更好的办法的。
js 在线预览pdf
weixin_44156462的博客
08-18 800
1 npm install --save vue-pdf 注意路径。别在桌面调出来个终端安装了，这种直接打回去重学Vue。 vue-pdf 初体验： 安装完之后，使用vue-pdf非常简单，和其他的组件并没有什么不同，上代码： 首先我们需要引入这个组件： 然后在页面使用vue-pdf,只需要添加标签： 8 重启你的项目，访问这个界面，你大概率会发现pdf已经成功显示在你的界面上了。这没有任何问题，但是，正当你准备拿起一根烟，点上，伴着舒适的《美丽的梭罗河》，欣赏你成功的杰作的时候，你会发现
vue预览pdf文件的几种方法_vue pdf预览(2)
2401_84433570的博客
04-29 1177
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue预览PDF文件的几种方法
weixin_58495461的博客
05-13 8966
2.3 使用组件展示PDF文件。1.1页面结构 html。2.2 注册并引入组件。
Android读取pdf文件及显示
YLx_SHEEP的博客
08-02 1124
package com.tianjian.basic.activity; import android.os.Bundle; import android.os.Environment; import android.os.Handler; import android.os.Message; import android.util.Log; import android.vi
pdf.js引入方式及初始化配置
xiao1215fei的专栏
06-30 5123
官方下载地址：Getting StartedA general-purpose, web standards-based platform for parsing and rendering PDFs.http://mozilla.github.io/pdf.js/getting_started/#download 下载后解压缩文件，解压后文件目录如下： 将整个文件夹拷贝到项目public目录下的plugin文件夹下： 此时已经将pdf.js完全引入到项目中，然后在使用该功能的页面中写入： 其中通过v-
在vue项目中预览pdf文件
03-22
你可以使用一个名为pdf.js的JavaScript库来在Vue项目中预览PDF文件。这个库可以在浏览器中渲染PDF文件，而不需要使用Adobe Acrobat或其他PDF阅读器。你可以在GitHub上找到pdf.js的完整代码，并将其集成到你的Vue项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值