vue以文件流方式使用pdj.js实现预览pdf文件

最新推荐文章于 2024-08-12 19:46:57 发布
最新推荐文章于 2024-08-12 19:46:57 发布
阅读量5.7k 收藏 8
点赞数 3
文章标签： vue.js pdf.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43478591/article/details/89041081
版权
本文介绍了一个Vue新手如何使用pdf.js以文件流方式实现PDF预览功能。在过程中遇到的viewer.html访问问题及解决方案，包括将pdf.js放入静态目录，以及通过encodeURIComponent解决URL参数解析错误的问题。
摘要由CSDN通过智能技术生成 
最近参与了个项目，前端框架采用的是vue.js，需求是在项目中做一个pdf在线预览打印等功能，在网上找了很多例子基本上全

都是靠pdf.js实现的，很多例子说的都不清楚，对于我这个vue小白来说话,和天书差不多…几经周折后，终于实现了这个功能，下面分享给大家。
点击下载，这里下载稳定版就可以了。
在这里插入图片描述
下载好解压出来大概是这个样子
在这里插入图片描述
一切就绪，放到tomcat里启动测试下（注意不要放错位置哈）
在这里插入图片描述
ok没有问题
在这里插入图片描述
接下来把它放到我新参与的vue的项目中，在放的过程中遇到了点小问题，怎么也访问不到viewer.html这个文件，路径什么的也都没有问题，对于我这个刚接触vue的小白来说百思不得其解呀，

最低0.47元/天 解锁文章
weixin_43478591
关注
pdjs:基于V8JavaScript External for Pure Data
05-18
pdjs 一个基于JavaScript外部纯数据。 pdjs尝试模仿Max的对象。 为Max js编写的许多JavaScript源文件应与pdj保持一致。 虽然Max js对象使用的是Mozilla的 JavaScript引擎版本，该版本于Firefox 4.0于2011年发布，因此缺少许多较新的语言功能（例如let ），但pdjs使用Google的V8 JavaScript引擎，该引擎支持最新的ECMAScript标准，并提供了更好的功能。表现。 支持平台 Windows x64 Linux x64 Linux arm64 Linux臂 macOS x64 用法 您可以通过deken进行安装，也可以从获取一个zip文件。 然后创建一个js对象，为其指定一个JavaScript文件的名称，例如js src.js ，相对于您的补丁或绝对名称。 您可能还必须添加一个declare
Vue3 使用pdf.js 预览pdf
m0_67401851的博客
03-06 2392
Vue3 使用pdf.js 预览pdf 非专业 如有语术错误请谅解 写在前面：vue-pdf 好像并不支持Vue3 参考https://segmentfault.com/a/1190000039858927 本样例是基于后端返回的是文件流 直接上样例 首先下载pdf.js 注意：将解压后的文件放在static下 1.使用ifame嵌套 <iframe id='pdf' ref='pdf' height='100%' :src='pdfUrl'
vue中pdf、word、excel、pptx等文件预览
最新发布
qq_44741577的博客
08-12 1053
将下载的内容(lib)放到public文件夹下。index.html中引入相关文件。
前端用pdfjs实现预览PDF
GodLoveMe的博客
11-21 6402
最近做项目，产品经理要求实现预览PDF，最起初是采用iframe标签，把服务器返回的一个可预览的链接扔到iframe标签的src中，就实现预览了，但是这种实现有一个弊端，就是预览出来的pdf是可以选中并且复制的，但是产品经理要求不可复制于是就换了一种思路，采用pdfjs这个开源包来实现预览PDF，具体实现的技术细节请参考如下步骤： 一.下载 下载请前往官网下载，具体链接：PDFjs预览插件官方下载地址，要下载stable版本，下载后是zip压缩包，要用解压工具给解压一下 二.解压 解压之后的文件
使用pdfjs实现在线预览pdf
瓜皮伦的博客
10-14 7353
在工作中可能会遇到前端展示pdf文件进行预览并提供下载的需求场景,例如操作指引,这个时候需要寻找一款实现该功能的插件,以pdjjs举例子。
vue3 渲染pdf文件流
m0_59338367的博客
09-27 446
axios请求需要添加 responseType 属性 为 blob。在浏览器导航栏输入pdfUrl的值就可以了。
基于VUE利用pdf.js实现文件流形式的pdf显示
有问题可关注公众号：前端研究院 后台输入问题回复
05-17 3795
首先推荐大家看一下这个demovue-pdf.js-demo，这里面包含固定本地地址，远程pdf地址，通过打开文件的方式打开pdf 这儿我们着重介绍一下通过文件流的形式打开pdf。（所谓文件流，就是通过ajax请求，返回的数据是文件流的形式） 1. 首先通过下载pdf.js的相关文件，当然我推荐直接拷贝vue-pdf.js-demo里面的文件，然后放到static目录里面 2. 第二...
vue实现在线预览pdf文件和下载（pdf.js）
10-15
在本文中，我们将详细探讨如何使用Vue.js实现在线预览PDF文件以及下载功能，这里采用的插件是pdf.js，一个广泛使用的开源PDF阅读器，由Mozilla基金会开发。 首先，了解pdf.js的基本概念非常重要。pdf.js能够将PDF...
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
10-18
在Vue.js应用中，开发一个能够在线预览PDF文件的插件时，常常会遇到手机浏览器不支持直接预览的问题。在这种情况下，可以利用pdf.js库来解决这个问题。pdf.js是一个由Mozilla维护的开源库，它能提供跨平台的PDF文档...
vue或uniapp项目使用pdf.js预览PDF文件
08-09
在这个项目中，你将学习如何利用pdf.js在Vue或UniApp环境下实现PDF预览功能，并对原代码进行必要的修改以解决潜在问题。 首先，让我们了解一下Vue和UniApp。Vue.js是一个轻量级的前端JavaScript框架，以其易学易用...
vue-pdf预览pdf文件流示例
12-26
在Vue.js应用中，预览PDF文件流是一个常见的需求，特别是在网页中展示来自服务器的数据或者动态生成的PDF文档。Vue-pdf库提供了解决这个问题的有效工具。这个库允许开发者在Vue组件中直接渲染PDF文件，无需将文件...
PDF.js —— vue项目中使用pdf.js显示pdf文件（流）
hsany330的专栏
11-19 2783
前言：项目中有一个需要预览下载pdf的需求，网上找了很久，决定使用 pdf.js 完成。 第一步：首先肯定是导入插件，我是从官网直接下载，链接：点击打开链接，注意需要放在static文件目录下 注意：这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟，但是比较方便。 第二步：使..
Vue3+pdfjs-dist实现PDF文件展示
gurenchang的博客
08-23 1万+
Vue3+pdfjs-dist实现PDF文件展示
vue3 实现预览pdf的几种方式（vue3-pdf, iframe流展示，vue-office/pdf）
dj7858177的博客
07-20 1万+
要实现菜单（二级）绑定文件，并进行预览（点击菜单即触发），支持文件上传下载（绑定菜单）,文件以byte[]形式保存到数据库（至于为什么不用文件存储系统，因为这是领导定的 =，= 而且这个功能比较小，数据也不多，成本有限），同时，要解析pdf文件里的内容（固定模板），抓取部门段落信息单独保存；但是vue3-pdf通病，默认只展示第一页，所以需要获取页数，来通过v-for来把所有页都展示出来（如果页数多，再考虑做翻页操。vue3-pdf(因为是要作展示用，而且文档不是很多页，因此不考虑加入上下翻页，全展示)
vue移动端项目渲染pdf步骤
luoxiaonuan_hi的博客
08-15 2058
这里不引入vue-pdf的包后面再做解释。
pdf在线预览 pdf.js的使用
weixin_40507164的博客
02-15 4万+
pdf 预览 pdf.js pdf跨域
pdf.js 使用介绍
热门推荐
搬砖狗-小强的专栏
07-11 4万+
在网页中加载并显示PDF文件是最常见的业务需求。现在的浏览器大多数都自带pdf预览功能，但是每个浏览器的pdf加载器并不一样，工具栏也无法定制化，为了统一不同浏览器pdf预览的一致性，并增加一些自定义功能，我们使用pdf.js来实现pdf的预览。下面就是项目实现的最终效果，右侧工具栏只留下打印按钮，并在打印的时候触发项目需要的事件,防止复制和下载pdf。 把项目部署到nginx或者IIS，直接在浏览器中访问viewer.html即可预览我们的pdf,使用方法如下，file为我们要预览的pdf文件地址。12
**PDFjs 文件流在线预览**
qq_38892122的博客
03-18 2430
最近在做springboot项目 获取sftp文件，在页面预览pdf，参考了很多别人写的，最后简单的实现了在线预览pdf，所需资源放在文章末尾。 1.提取sftp文件，返回byte字节，service层 public byte[] download(String filePath, String fileName) { InputStream in = null; ...
解决pdf.js预览pdf文件流(base64)亲测可用
qq_43058760的博客
09-19 8233
** 解决pdf.js预览pdf文件流(base64)亲测可用 ** **我们需要上传pdf文件时支持预览，因为文件尚未传到服务器，所以不存在取后台取文件了，但是我们前端的小哥也没有获取选择的文件的本地路径，只抛给我一个base64码，很尴尬。。。。。 去网上查阅了很多资料，很少有这方面的文章，遂记下来，以备以后用到。 我用的是pdf自带的viewer.html页面。 直接上代码：** 首先pdf.js官网下载：官网下载地址 我下载的是es5兼容低版本的 1.下载好后，解压出来，结构如下： 2.直接从本
Vue集成pdf.js实现PDF在线预览
“vue实现pdf文档在线预览功能” 在Android系统中，由于原生支持不足，PDF文档的在线预览通常需要借助第三方插件来实现。Vue框架下，我们可以利用pdf.js这个插件来达到在线预览PDF的效果。以下是如何在Vue项目中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值