pdf.js使用方法,

最新推荐文章于 2023-07-27 14:09:58 发布
最新推荐文章于 2023-07-27 14:09:58 发布
阅读量225 收藏
点赞数
分类专栏： vue js 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45537145/article/details/123824232
版权
vue 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

pdf.js使用步骤

改步骤是二进制数据流使用方法,解决图章不显示问题

  1. 到官网下载 pdf.js 插件并解压,选择稳定版 pdf官网链接在这里插入图片描述
  2. 解压文件放到项目中,解压文件放到public\lib\PdfJS文件下在这里插入图片描述
  3. 在项目中引用 url是pdf路径,
 window.open(
            "/lib/PdfJS/web/viewer.html?file=" + url
          );
  1. 如果后台返回的是二进制数据流,需格式化
    单独引入axios单独
  2. 如果图章不显示需要改pdf.worker.js源码,注销即可
    在这里插入图片描述
美团外卖兼职前端菜鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pdfjs 使用方法
qq_27007423的博客
12-17 1071
1 官方下载地址 http://mozilla.github.io/pdf.js/getting_started/ 这里下载 pdfjs-2.5.207-dist 稳定版 2 删除多余的语言包 我这里只需要用中文语言包，其它的语言都删除了 3.使用方法（window.open/iframe） 部署到服务器上，打开viewer.html这个页面，然后把文件路径通过file参数传输进去即可 预览如下图 window.open('http://127.0.0.1:5501/web/viewer.html?f
PDF.js使用心得
Li_Cheng_Liang的博客
07-19 4万+
一次在开发微信预览保单的时候所使用到的，由于安卓手机浏览器不支持解析PDF，所以才用了PDF.js来解析PDF并展示。 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。 在线演示地址：http://mozilla.github.com/pdf.js/web/viewer.html PDF.js可在官网下载  地址：http://mozi
web前端js显示后台接口pdf二进制流文件
03-28
web前端js显示后台接口pdf二进制流文件，可以直接在idea运行。包含PDFJS 等相关js。详细参考readme
使用pdf.js渲染二进制流文件，并添加水印
Sansa_stark的博客
07-27 1322
接口请求时需要设置返回类型为blob，拿到数据后使用window.URL.createObjectURL把blob转为路径，作为参数传给pdfjsLib.getDocument方法，该方法会返回一个。如果要添加水印，需要用canvas来画，所以使用canvas渲染，如果只是预览，不需要用pdf.js，直接用iframe渲染二进制流转的路径就可以。然后在html页面中引入pdf.js和pdf.worker.js两个文件，一定要引入两个！首先在pdf.js官网下载pdf.js包。
ajax返回的是流如何转换为pdf,如何使用javascript从web服务返回的二进制字符串生成PDF文件...
weixin_42511879的博客
08-05 859
如何使用javascript从web服务返回的二进制字符串生成PDF文件我正在尝试从二进制流构建一个PDF文件，作为Ajax请求的响应。通孔XmlHttpRequest我收到以下数据：%PDF-1.4.............hole data representing the file....%% EOF到目前为止，我尝试的是通过data:uri..现在，它没有什么问题，而且运作良好。不幸的是，...
php 二进制 pdf文件怎么打开,如何从javascript中的二进制流打开并读取PDF
weixin_31697021的博客
03-26 720
我在使用JavaScript读取二进制数据流时遇到了一些困难。如何从javascript中的二进制流打开并读取PDF目前，一个窗口弹出并打开并显示无法加载PDF文档。 我会在下面发布我的回复和代码，任何帮助将不胜感激。这里是我的后端PHP：function getPDF() {$file = __DIR__.'\..\pdf\FAS_HeadedPaper.pdf';header("Content...
pdf.js使用文件流预览pdf
09-27
网上大部分pdf.js都是用url方式预览pdf,此处给出pdf.js使用文件流预览pdf的Web工程; 此是maven工程; 100%能运行；
PDF转成二进制流的字符串，及将二进制流反转成PDF
香帅的博客
10-24 2万+
package com.xiangshuai; //为工程添加 sun.misc.BASE64Encoder和sun.misc.BASE64Decoder包：   //右键项目》属性》Java Build Path》jre System Library 》access rules 双击 add》resolution选择accessible,下面填上**点击确定即可！   import java....
pdf.js使用demo(已解决隐藏打印下载等按钮）
07-11
在这个“pdf.js 使用 demo（已解决隐藏打印下载等按钮）”中，我们主要关注的是如何定制 PDF.js 的行为，特别是如何去掉默认的打印、下载等按钮。这些功能虽然方便，但在某些情况下可能不希望用户直接访问，比如为了...
pdf.js 文件 最新版本
04-18
PDF.js 是一个开源的 JavaScript 库，由 Mozilla 维护，用于在 web 浏览器中渲染 PDF 文档。这个库的主要目标是提供一个纯前端的解决方案，使得用户无需依赖 Adobe Reader 或其他本地插件就能在线查看 PDF 文件。...
pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_
09-30
pdf关键字坐标获取
pdf.js和pdf.worker.js
12-07
总的来说，PDF.js和pdf.worker.js的结合使用为Web开发者提供了一个强大的工具，使他们能够无缝地在浏览器中呈现PDF内容，同时保持良好的性能和用户体验。无论是在教育、科研、出版还是企业环境中，这个库都有广泛的...
pdf.js最新资源下载
最新发布
10-14
本文将详细介绍PDF.js的核心功能、使用方法以及最新资源的获取。 PDF.js支持的主要功能包括： 1. **跨平台兼容性**：由于完全基于JavaScript，PDF.js可以在任何支持WebGL和Canvas的现代浏览器上运行，包括Chrome、...
带手势缩放功能的pdf.js
12-20
PDF.js 是一个由 Mozilla 团队开发的开源 JavaScript 库，用于在 Web 浏览器中渲染 PDF 文档。这个库旨在提供一种无插件的、跨平台的方式来查看 PDF 文件，充分利用现代浏览器的能力，提高用户体验。在这个特定的...
js上传文件转二进制格式
qq_35703552的博客
11-09 6989
html部分 <Upload ref="upload" :on-success="uploadSuccess" :headers="uploadHeaders" :show-upload-list="false" :action="actionUrl" :max-size="2048" :accept="accept" :format="format" :on-format-err
js使用二进制流预览PDf
qq_42211102的博客
11-27 2130
不管responseType使用arraybuffer还是blob，前端需要使用原生，或者axios，否则会显示空白pdf
pdfjs的使用
qq_36762151的博客
08-05 1762
web中打开PDF
利用pdfJS实现以读取文件流方式在线展示pdf文件
热门推荐
我的博客
09-04 7万+
PDF.js 的使用 PDFJS是在线预览PDF的一款神器。 对于PC端浏览器，一般直接提供pdf文件，iframe一下就可以直接预览了。我使用这个插件的原因是在移动端，android微信无法在线预览，原因是微信android使用x5的内核，就是QQ浏览器的那个貌似它只要检测到文件流，就会直接下载。 官网地址：http://mozilla.github.io/pdf.js/ 下载PDF....
js鼠标坐标获取
L_ZR_1的博客
03-15 466
1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.3. screenX/screenY：鼠标在屏幕上的位置,从屏幕左上角开始（w3c标准） 4. offsetX/offsetY:IE特...
vue pdf.js使用
08-25
Vue.js与PDF.js结合使用可以实现在Vue项目中展示和操作PDF文件的功能。下面是使用步骤： 1. 安装pdf.js库：使用npm或者yarn命令安装pdf.js库，可以执行如下命令： ``` npm install pdfjs-dist ``` 2. 创建PDF.js组件：在Vue项目中创建一个PDFViewer.vue组件用于展示PDF文件。可以按照如下方式创建组件： ```vue <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import pdfjs from 'pdfjs-dist'; export default { mounted() { this.loadPDF(); }, methods: { async loadPDF() { const pdfUrl = 'path/to/pdf/file.pdf'; const pdfDoc = await pdfjs.getDocument(pdfUrl).promise; const page = await pdfDoc.getPage(1); const canvas = this.$refs.canvas; 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> ``` 3. 使用PDFViewer组件：在需要展示PDF文件的页面中使用PDFViewer组件。比如，在App.vue中引入PDFViewer组件： ```vue <template> <div id="app"> <PDFViewer /> </div> </template> <script> import PDFViewer from './components/PDFViewer.vue'; export default { components: { PDFViewer } } </script> ``` 注意：以上代码仅展示了PDF.js与Vue的基本结合使用，更详细的PDF.js使用方法和功能可以参考PDF.js官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值