Vue2集成pdfjs要点

已于 2024-08-01 17:54:05 修改
阅读量635 收藏 11
点赞数 5
分类专栏： 笔记 文章标签： vue.js nginx
于 2024-08-01 15:19:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42554373/article/details/140847972
版权

开发环境：
官网下载，解压，在项目public文件夹下新增文件夹pdfjs，解压后的文件放进来，主要是build和web。

Iframe没什么好说的，src 指向地址“/pdfjs/web/viewer.html?file=你的pdf地址，pdf地址最好用encodeURIComponent包一下。

生产环境：
Iframe 的src 指向地址要变为绝对路径，…/…/pdfjs/web/……

因为我打包的dist 内pdfjs文件夹和static 平行的，所以地址这样写

Nginx还需要配置
location /pdfjs ｛
跟一般项目配置就可以
注意index 加一个viewer.html
try_files $uri $uri/ /部署的文件夹名称/pdfjs/…/viewer.html
}

注意，有的文件接口本身get请求带？号传递参数，viewer .html?file=这也有个？问号，可能会有影响，你可以修改一下接口rest风格就可以了

viewer.html内可以找到print 和download标签使用css隐藏实现禁止下载打印，当然保险的方式直接注销代码，但是会导致添加监听事件报错，需要在viewer.mjs内找到11975行添加判断eventName 不等于print download就可以啦，还有禁止右键菜单代码也可加进来效果杠杠的

还有跨域，百度一下注销那三行代码就可以了

这样就可以正常预览啦

vue项目内集成pdfJs
A_one2010的博客
11-03 1887
先上官网链接 PDF.js 使用vue进行h5开发过程中，有时需要展示pdf，分享出来的页面，运行平台如果不支持pdf查看的话怎么办，pdfjs提供了很好的api，在这儿给大家提供两种方法以供参考。 效果分别如下： 第一种方法，缩放，跳转等等，都需自己额外调取及操作 第二种，则比较现成，样式也更接近浏览器自带的pdf预览。 两种实现方法如下 1 引入pdfjs-dist，调取pdfjs api 将需要查看...
vue 2 如何使用 pdf.js 查看 PDF 文件流？
weixin_44378370的博客
05-18 3360
【代码】vue 2 如何使用 pdf.js 查看 PDF 文件流？
vue3使用pdf.js进行pdf报告预览详细全流程
zgx200318的博客
09-27 1332
项目中需求是对多个pdf进行合并后嵌套在页面预览（不可跳转其他页面或弹窗），需要支持自动缩放 页数切换 文档查找 切换侧栏 显示文档大纲 标注高亮 文本 绘图 添加或编辑图片 打印 保存....等等 调研中发现pdf.js除了合并均可满足。
vue2 使用pdf.js 实现pdf预览，并可复制文本
fmi110的博客
01-16 4696
需求：pdf预览，并且可以选中pdf的内容进行复制。
Vue学习之：在 vue2 中引入 pdf.js 并配置使其能工作
qq_42902997的博客
05-16 2963
安装 不同版本的 pdfjs 在 node_modules 中的目录不太一样，如果你想让他正常运行就按照我下面的来 确保你的 nvm 版本是 18.17 如果不是的话，建议你配置跟我调成一样的，否则很容易出问题 nvm install 18.17.0 nvm use 18.17.0 安装 pdfjs，指定版本号 @2 如果你默认下的话会下载 4 开头的版本，会有各种问题 npm install pdfjs-dist@2 运行以下命令以安装处理类私有方法的 Babel 插件： npm inst
【Vue】vue2使用pdfjs预览pdf文件，在线预览方式一，pdfjs文件包打开新窗口预览pdf文件
qq_51055690的博客
09-12 9771
vue2项目，实现pdf文件的预览，只针对pdf类型，其他的不做考虑。提示：以下是本篇文章正文内容，下面案例可供参考打开方式就window.open拼路径就好了，我只针对pdf做了预览判断。
vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容
葫芦娃y的博客
03-25 3169
vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容
vue中集成pdfjs自定义分页
weixin_30823001的博客
08-31 722
<template> <div id="div_read_area_scrool" class="no-scrollbar--x" :style="'text-align:center;height:'+ '500px;'+'overflow: auto;'"> <div id="div_read_area"></div> &l...
vue项目实战系列二十四：集成pdf.js
wanmeijuhao的博客
12-30 522
【代码】vue项目实战系列二十四：集成pdf.js。
vue 集合pdfJs
03-27
在 Vue 应用中集成 PDF.js，首先需要确保你的项目环境中已经安装了 Vue CLI 或其他构建工具。接着，你需要引入 PDF.js。可以通过 npm 或 yarn 安装： ```bash npm install pdfjs-dist --save # 或者 yarn add pdfjs...
vue3使用pdfjs实现pdf嵌入
qq_52179917的博客
11-17 2820
npm装包： cnpm i pdfjs-dist@2.5.207。
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue使用pdfjs显示PDF可复制的实现方法
10-17
2. 集成到Vue组件中：创建一个Vue组件，例如名为showPdf的组件。在该组件中，需要引入PDFJS，以及PDF.js提供的TextLayerBuilder和pdf_viewer.css样式文件。 3. 使用组件：在showPdf组件的template中，使用标签来...
vue3.0使用pdfjs-dist查看pdf文件
果酱的博客
12-10 5731
前情：项目要的急，就简单的能看pdf文件，没有其他功能 我用的pdfjs-dist版本号：2.5.207 下面是代码 封装组件 <template> <template v-for="item in pageNum" :key="item"> <canvas :id="`pdf-canvas-${item}`" class="pdf-page" /> </template> </template> <script>.
vue2使用pdfjs-dist批量在页面渲染pdf
记不住代码的前端混子
07-07 4000
vue2使用pdfjs-dist页面上展示pdf
vue2.x 使用pdf.js预览pdf文件
EvenChen的博客
10-28 3307
vue2.x 使用pdf.js预览pdf文件
vue使用pdfjs-dist在电脑上展示PDF文件
weixin_52941842的博客
04-29 2217
踩坑：删除依赖或者重新拉取项目的时候再运行项目会报语法错误,这个时候就不要去添加什么loader了，除了raw-loader有用，试了大部分的loader都不管用，而且添加了raw-loader方法功能就用不了，因为方法被编译成字符串了，再去使用eval什么的去转也没必要。安装的时候一定要带上版本号，这里采用的是2.0.943（因为这个版本对于我目前的项目比较合适可以正常使用，其他版本大概率会报错），当前项目使用的是vue2，vue的版本是2.5.10。库中用于处理PDF文件的工作线程脚本。
vue整合pdfjs，实现pdf文件预览
matinal 當冬夜漸暖 。公众号：matinal
01-07 1861
更多内容关注公众号：SAP Technical  背景 项目上要求实现pdf文件格式的预览。 分析 pdf格式的文件浏览器是可以直接打开的。所以只需要返回pdf文件的文件流，就可以直接预览文件，通过这种方式打开，整个页面全是pdf的文件内容。需求是要求预览时，页面上要加上特定的标题格式，所以直接把文件流在浏览器打开的方式行不通。通过收集相关资料，找到pdfjs插件以支持文件的预览。 ...
vue2使用pdfjs-dist实现pdf预览（iframe形式，不修改pdfjs原来的ui和控件，dom层可以用display去掉一部分组件）
最新发布
Shi_haoliu的博客
10-14 842
vue2使用pdfjs-dist实现pdf预览 使用本地的pdfjs-dist 用的原生的pdfjs-dist ui没变，但是应该可以在源码删掉一些工具和组件（在iframe中使用不能拿样式去删组件）
vue2使用pdfjs
09-01
Vue.js 是一个流行的 JavaScript 前端框架，而 PDF.js 是一个开源的 JavaScript 库，用于在网页上显示 PDF 文件。如果你想在 Vue.js 中使用 PDF.js，你可以按照以下步骤进行操作： 1. 首先，安装 PDF.js 库。你可以通过 npm 或者 yarn 来安装。打开终端，进入你的 Vue.js 项目目录，并执行以下命令： ```bash npm install pdfjs-dist ``` 或者 ```bash yarn add pdfjs-dist ``` 2. 在你的 Vue 组件中，导入 `pdfjs-dist` 库，并创建一个 PDF 查看器组件。你可以使用 `<canvas>` 标签来展示 PDF 文档。以下是一个简单的示例： ```vue <template> <div> <canvas ref="pdfViewer"></canvas> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { mounted() { this.renderPDF() }, methods: { async renderPDF() { const pdfPath = 'path_to_your_pdf.pdf' const canvas = this.$refs.pdfViewer const loadingTask = pdfjsLib.getDocument(pdfPath) const pdf = await loadingTask.promise const page = await pdf.getPage(1) const scale = 1.5 const viewport = page.getViewport({ scale }) const context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width const renderContext = { canvasContext: context, viewport: viewport } await page.render(renderContext) } } } </script> ``` 在上面的示例中，我们首先导入了 `pdfjs-dist` 库，并在 `mounted` 阶段调用 `renderPDF` 方法。在 `renderPDF` 方法中，我们加载 PDF 文档并获取第一页，然后根据页面大小创建一个相应大小的 `<canvas>` 元素，并将 PDF 页面渲染到该 canvas 上。 请确保将 `path_to_your_pdf.pdf` 替换为你要显示的 PDF 文件的实际路径。 这只是一个简单的示例，你可以根据你的需求进行更复杂的操作和样式调整。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值