前端如何预览pdf

最新推荐文章于 2024-03-01 17:38:31 发布
最新推荐文章于 2024-03-01 17:38:31 发布
阅读量453 收藏 1
点赞数
文章标签： pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50478723/article/details/134435939
版权

1.第一种方案  可以通过后端请求接口转化为blob  然后通过window.open直接打开 代码如下

        某接口（地址）.then((res)=>{
        

 const blob = new Blob([res], { type: "application/pdf" });

          this.pdfUrl = window.URL.createObjectURL(blob);

          window.open(this.pdfUrl)

})

2.第二种方案

通过第三方插件实现  使用pdf.js预览 

在pdf.js官网下载 文件 放到项目的punlic

然后通过 iframe  将路径放进去   '/pdfjs/web/viewer.html?file=' + 地址+接口路径 + 文件path

前端小啊giao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
pdf文件在前端展示的三种方法
goobird的专栏
01-03 2万+
1、使用浏览器直接打开pdf文件； 目前浏览器都支持直接打开pdf文件，支持ie8以上浏览器及其他常用浏览器； 浏览器 是否支持 备注 Chrome 是   360急速 是   IE 8以上版本/...
vue纯前端实现文件预览（pdf,docx,png)超简单
qq_35452726的博客
07-24 855
vue纯前端实现文件预览（pdf,docx,png)超简单有手就能实现的
Vue文档预览的几种方式
最新发布
......
03-01 2920
闲来无事，记录一下，几种文档的预览。
纯前端预览PDF、DOC、DOCX、图片、视频
01-11
1：纯前端 预览 pdf、word、图、视频 2：即开即用 文章： https://blog.csdn.net/m0_57904695/article/details/124885964?spm=1001.2014.3001.5502 3：将项目里的dist文件复制到需要用到的项目即可，在需要用的页面使用iframe引入dist的index.html
web前端 ，pdf格式文档在线预览
06-23
支持ie什么的、浏览远程pdf文档，在线预览
使用pdf.js完成pdf浏览
weixin_45122482的博客
04-02 1万+
pdf.js的使用
前端实现 PDF 预览的常见方案
热门推荐
forward_xx的博客
09-18 2万+
前端实现 PDF 预览常见的5 种方案 ：iframe 标签、embed 标签、object 标签、PDF.js、PDFObject。
前端如何预览pdf文件流
valsedefleurs的博客
05-23 8226
通过查找资料，可以找到如下几种方案，其中最为成熟的方案是vue-pdf1. iframe 既可以用来浏览本地static下的文档，也可以预览后端返回的文件流文档2. vue-pdf 较为完善的vue预览pdf的方案3. vueshowpdf 网络上找到的一个他人封装的pdf组件优点vue-pdf总结下来，简单在页面嵌套PDF样式没有定制化vueshowpdf权限控制，样式定制需求高vue-pdf。
前端预览pdf文件
brilliantSt的博客
07-12 5862
前端预览pdf
前端展示 PDF 预览的几种方法
qq_44749901的博客
12-06 8730
一、js实现pdf预览HTML 内联框架元素 iframe 表示嵌套的 browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。 2. embed 标签 HTML embed 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供 3. object 标签 HTML object 元素（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。 4. 使用 PDF.js
vue中前端实现pdf预览（含vue-pdf插件用法）
m0_71537867的博客
04-02 1万+
vue中前端实现pdf预览
全端兼容的前端h5预览pdf插件
03-22
全端兼容的前端h5预览pdf插件,开箱即用，完美兼容PC和移动端 直接引用pdf.html?file=/upload/pdf.pdf即可
前端-PDF预览水印-viewer.js-增加添加水印逻辑
06-16
最近在做一个关于pdf文件水印相关的需求。在通过viewer.js 组件预览上传后已有水印的文件时，发现水印没有显示。这个修改后的viewer.js将解决这个问题 博客原文：...
pdfjs解决前端需要预览打印下载pdf的一款插件
01-09
一款解决pdf预览下载打印的集成插件，可以自行参考官网教程，官网下载的太慢了，git也拉不下来
前端pdf预览，可用于uniapp
06-09
前端pdf预览，可用于uniapp
前端 查看 PDF文件
jjw_zyfx的博客
07-06 750
其实很简单只需要一个命令即可 window.open(“http://xxx.com/Public/Static/pdf/jyjk/journalPdf/2019/1.pdf”） 就可以打开另一个窗口，查看PDF文件了
pdf.js使用方法 前端实现pdf的阅读
u010696334的博客
11-24 1575
pdf.js使用方法 前端实现pdf的阅读 本章主要介绍pdf.js在浏览器中的使用 官方下载地址：http://mozilla.github.io/pdf.js/getting_started/#download 接下来直接上代码，我使用的版本是2.5.207，不同的版本之间确实存在一定的使用差异，优先参考的是官方的示例文件，我开始本来是想找个大家现成的思路直接使用，后来都没成功，还是回到官方网站参考了完成了我想实现的功能。 有些之前的版本需要显式引入pdf.work.js，这个版本不用再关心这个
使用PDF.js在网页显示pdf文件并跳转到指定页码
u010723516的博客
06-05 2万+
最近在做一个土地档案管理系统 ，有个需求是在前端网页展示土地档案扫描件的pdf文件，并根据目录跳转到指定页。 第一个问题，显示pdf文件。引入pdf.js。然后设定html地址，地址为http://localhost:8080/JYSystem/static/plugins/pdfJs/web/viewer.html?file=pdf文件路径 如图 这一步网上已经有很多人实现了，并写
前端页面查看PDF文档内容总结
ygxyvip的博客
08-13 1375
由于项目需要，需要通过前台点击项目列表浏览对应的PDF文件内容（由于权限控制不允许下载），特此记录下实现过程。 1、下载需要用到的插件PDF.js（http://mozilla.github.io/pdf.js/），然后解压后将里面的文件放入新建的PDF.js文件夹里，再将PDF.js文件夹放入项目的资源文件备用。 2、后台获取到文件转化成流的方式通过接口传递给前台，以java为例如下： ...
vue 前端预览pdf
09-09
你可以使用 PDF.js 在 Vue 前端预览 PDF 文件。以下是一个简单的示例： 1. 首先，安装 `pdfjs-dist` 包： ```bash npm install pdfjs-dist ``` 2. 在 Vue 组件中，导入 `pdfjs-dist` 并创建一个方法来加载和渲染 PDF 文件： ```javascript import pdfjsLib from 'pdfjs-dist/webpack'; export default { data() { return { pdfUrl: '/path/to/your/pdf/file.pdf', pdfDocument: null, currentPage: 1, totalPages: 0, }; }, mounted() { this.loadPDF(); }, methods: { async loadPDF() { try { const loadingTask = pdfjsLib.getDocument(this.pdfUrl); const pdf = await loadingTask.promise; this.pdfDocument = pdf; this.totalPages = pdf.numPages; this.renderPage(this.currentPage); } catch (error) { console.error('Error loading PDF:', error); } }, async renderPage(pageNumber) { try { const page = await this.pdfDocument.getPage(pageNumber); 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); } catch (error) { console.error('Error rendering page:', error); } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++; this.renderPage(this.currentPage); } }, previousPage() { if (this.currentPage > 1) { this.currentPage--; this.renderPage(this.currentPage); } }, }, }; ``` 3. 在模板中使用 `<canvas>` 元素来显示 PDF 页面内容： ```html <template> <div> <div> <button @click="previousPage">Previous</button> <button @click="nextPage">Next</button> </div> <canvas ref="pdfCanvas"></canvas> <div>Page {{ currentPage }} of {{ totalPages }}</div> </div> </template> ``` 这样，你就可以在 Vue 前端预览 PDF 文件了。你可以使用 `nextPage` 和 `previousPage` 方法来切换页面。记得将 `/path/to/your/pdf/file.pdf` 替换成你实际的 PDF 文件路径。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值