前端展示 pdf 文件，附带下载功能

牢有所依

已于 2023-06-30 15:47:52 修改

阅读量84

点赞数 1

文章标签：前端 pdf javascript vue

于 2023-06-30 15:45:06 首次发布

本文链接：https://blog.csdn.net/qq_42317528/article/details/131478193

版权

直接使用以下标签，:src 绑定的为后端返回的PDF路径，需改成自己的，感觉这个标签还有其他功能，感兴趣的可以自行研究

<embed :src="pdfurl" type="application/pdf" width="100%" height="600px" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

牢有所依

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

spring-boot 下，使用embed标签直接显示从数据库抓取的PDF文件

swjtu_yhz的博客

02-22

2541

在Spring boot 的开发环境下，用embed标签显示从数据抓取的ＰＤＦ文件。 1.前端embed标签处代码：因为使用了thymeleaf 引擎，#{${materialNum} 为该引擎获取request的attribute的方式，业务为根据特定物料编码匹配抓取PDF文件。 2.后端controller接口： @RequestMapping(value="loadTe

PC端与手机端h5页面pdf展示 pdfh5.js 与 pdf.js

寂寞的搬运工的博客

03-17

7789

PC端与手机端h5页面pdf展示 pdfh5.js 与 pdf.js

1 条评论您还未登录，请先登录后发表或查看评论

把PDF文件展示在前端

lllkkk0126的博客

09-05

1525

第一步：第二步：

embed实现PDF文件预览

sonichenn的博客

06-02

1730

vue预览文档

Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战

黛琳ghz的博客，期待你的关注。

11-21

3万+

在之前的两篇关于 Print.js 文章中，我们已经初步学习了打印插件 Print.js 的使用，既然涉及到 PDF 的打印，如果想要预览 PDF 后再进行打印应该怎么做呢，接下来通过这篇文章记录一下 Vue 项目实战中，在页面中展示 PDF 文件的一些例子。

vue3中使用 vue-pdf-embed 实现pdf文件预览、翻页、下载等功能

qq_45897239的博客

02-08

1万+

一、安装 `vue-pdf-embed` 1、安装 `vue-pdf-embed` 二、文件预览 1、`html` 结构内容 2、`css` 样式 3、`js` 基本预览功能实现 4、获取文件总页数三、翻页四、缩放五、下载六、打印七、指定页面跳转八、项目演示九、参考资料

前端vue常见面试题 (附带答案) 完整版PDF.pdf

05-07

### 前端Vue常见面试题详解 #### 1. Vue和React有什么不同？使用场景分别是什么？ **不同点：** - **语法糖**：Vue提供了更多语法糖，如指令`v-if`、`v-for`等，使得模板更加直观易读。 - **虚拟DOM更新策略**：...

纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档

02-09

纯原创资源，盗用必究，仅用于学习和交流，持续更新，...3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景

网页实现图片和PDF文件预览

12-19

网页实现图片和PDF文件预览是一项常见的功能，尤其在文档分享和在线阅读平台中非常普遍。这个过程通常涉及HTML、CSS、JavaScript（如jQuery库）等前端技术，以及可能的后端支持。以下是对这个主题的详细解释： 1. *...

Modules03. Optimizer 模块化代码优化器.pdf_前端学习资料

09-01

在前端开发中，优化代码是提高应用程序性能的关键步骤。`Modules03. Optimizer` 提到了几个关键概念，包括模块化、代码优化、RequireJS Optimizer、UglifyJS 和 Closure Compiler，以及如何使用 Node.js 和 r.js ...

vue3中使用pdf.js、实现移动端、PC端的PDF预览、支持绝大部分情况

qq_40893035的博客

10-11

3502

之前一直使用的pdf.js+canvas的形式预览PDF，但是这有一个很大的弊端，就是canvas生成的图片太糊了，而且本质上这渲染的根本不是pdf，而是一张图片，很多pdf中带有的功能这里都不能实现。我的理解是，在手机端使用手势缩放放大缩小pdf后，出现了错乱的情况，这时候我再手动调用一下源码中自带的。我在源码中加了一个被我隐藏的按钮，并为其添加点击事件，在缩放完成后，调用点击事件，完成pdf的更新。抛砖引玉，我这个方法虽然可以解决，但是太僵硬了，为了解决而解决，肯定是有更好的办法的。

前端预览PDF总结：iframe、embed、PDFObject、PDF.js

热门推荐

ruanhongbiao的专栏

05-09

8万+

要在网页上显示PDF文件,首先< object >、< embed >、< iframe >这几个标签就能实现PDF文件的预览（无需JavaScript支持），我还在网上看了下发现挺多第三方js库可以实现PDF预览，如jQuery Document Viewer、jquery.media.js、PDFObject、PDF.js等等。我大概看了下PDFObject...

实现浏览器打开pdf文件，仅供用户浏览，禁止用户下载的功能

u014486575的博客

09-03

3万+

这是小姐姐前不久接到的需求，公司网站上的pdf仅供用户浏览，一开始，我是拒绝的，这个浏览pdf，并且下载pdf是浏览器查看pdf时自带的功能，我总不至于去改浏览器吧。哎呀，转念一想，有没有方法是不在浏览器中直接打开pdf文件，而是以html的形式浏览pdf呢？出于好奇（maybe）,开始查资料，诶，让我找到了一个东西，叫pdf.js, 其网站如下：pdf.js官网 ...

前端实现pdf文件的在线预览与下载

weixin_41980283的博客

06-28

2655

前言在项目中我们经常会出现各种各样的法律文件、免责说明等文件需要用户阅读，很多文件除了阅读外还要支持用户下载。为了快速开发，一些变动不大的文件，或者是项目中不想开发富文本的时候我们可以选择直接使用pdf文件的预览和下载。 < iframe > 所有浏览器都支持 < iframe > 标签，直接将src设置为指定的PDF文件就可以预览了。此外可以把需要的文本放置在 < iframe > 和之间，这样就可以应对无法理解 iframe 的浏览器，比如下面的代码可以.

前端实现pdf在线预览

yangqii的博客

06-28

6386

概述：pdf在线预览，包括PC端浏览器、IOS、Android，开发过程中遇到的问题及解决方案【1】iframe 直接打开pdf文件（可用于PC端） <iframe src="pdf文件地址" width="100%" height="100%" frameborder="0"></iframe> 存在问题：移动端会直接弹出pdf下载页面，不支持pdf在线预览【2】<object> <embed>标签打开pdf文件（可用于PC端、IOS）解

-webkit-box-reflect属性与倒影效果的实现

最新发布

读心悦

09-13

532

是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。

Vue使用query传参Boolean类型，刷新之后转换为String问题

q879936814的博客

09-12

533

要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。

前端下载pdf文件到本地代码

06-06

你可以使用 JavaScript 和 HTML5 的 File API 来实现前端下载 PDF 文件到本地。以下是一个简单的示例代码： ```html <a href="path/to/your/pdf" download>Download PDF</a> ``` 在这个示例中，我们创建了一个指向 PDF 文件的链接，并添加了 `download` 属性。当用户点击链接时，会自动下载并保存 PDF 文件到本地。如果你需要通过 JavaScript 动态生成下载链接，可以使用以下代码： ```javascript const downloadLink = document.createElement('a'); downloadLink.href = 'path/to/your/pdf'; downloadLink.download = 'file.pdf'; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); ``` 在这个示例中，我们首先创建了一个 `a` 元素，设置 `href` 属性为 PDF 文件的路径，设置 `download` 属性为要保存的文件名，然后将元素添加到页面中。接着，我们触发了 `click` 事件来启动下载，最后将元素从文档中移除以清理。注意：浏览器可能会阻止自动下载文件，或者要求用户手动确认下载。如果你需要强制下载，可以考虑使用第三方库或后端 API。