vue-在线预览pdf文件和下载（pdf.js）

已于 2022-01-26 09:28:55 修改
阅读量1w 收藏 21
点赞数 2
分类专栏： vue 文章标签： vue
于 2019-09-25 18:00:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42855188/article/details/101376753
版权
本文介绍了如何在Vue项目中利用pdf.js插件实现PDF文件的在线预览和下载功能。首先，从GitHub或百度网盘下载pdf.js，然后将构建后的文件放入Vue项目的public目录，最后在Vue组件中引入并展示完整代码。该方法适用于IE10及以上、Chrome、安卓和苹果设备。
摘要由CSDN通过智能技术生成

最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如jquery.media.js（ie无法直接浏览）
最后选择了pdf.js插件（兼容ie10及以上、谷歌、安卓，苹果），强烈推荐该插件，以下介绍用法

一、下载插件

二、将下载构建后的插件放到文件中public（vue/cli 3.0）

在这里插入图片描述

三、在vue文件中直接使用，贴上完整代码

<template>
  <div
最低0.47元/天 解锁文章
安静的天空
关注
专栏目录
js实现pdf文件下载
宇宙
07-28 1308
【代码】js实现pdf文件下载。
pdf.js文件下载
10-31
博客中所涉及到的文件路径，文件名及需要注释的部分都是与此资源相匹配的，大家可以直接下载配合文档解决问题
【PDF.js】PDF文件预览
HJay_Chou的博客
04-10 3629
使用PDFJS实现pdf文件的预览，支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。
记录一下使用PDFJS遇到的坑
m0_63057114的博客
07-29 2639
在引用PDFjs的过程中，遇到了一下坑，这这里记录一下。列如：1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.和禁用按钮功能等...
在web端在线预览pdf文件（分页预览、下载、打印）
rookien_的博客
01-24 4970
本文写作环境是若依开源框架vue2+elementui在做这个需求的时候，我查找了资料，简单的是有使用vue-pdf的，我写了发现有跨域问题，只能另寻他法，最后发现很有码友大大们使用的是pdf.js插件，我开始着手，在和后端同事的配合调试下终于成功实现了pdf文件在线预览。以上就是完成pdf文件预览的步骤，可以实现pdf文件的简单预览（分页）、下载。看很多码友大大们还实现了一些可以高亮显示页面内容和驻点什么的，本文这只是一个简单的实现，实现额外功能还需要在此基础上加深研究。加深巩固：Ajax请求。
pdf.js——在线预览下载打印pdf文件插件
sunyanchun的专栏
09-27 1261
html使用 下载PDF.js，http://mozilla.github.io/pdf.js/getting_started/#download 将 pdfjs 文件夹 放到 项目static文件夹下 代码示例 <iframe id="iframe1" src="/static/pdfjs/web/viewer.html?file=xxx.pdf"></iframe> 可以在js中动态赋值 var prefixUrl = '/static/pdfjs/web/view.
pdf.JS下载
09-18
随着网络的发展，在线阅读浏览文档，已经成为了分享文档的新兴方式，人们不用购买图书或者去图书馆、档案室等图书档案资料实地阅读，通过网络就可以阅读在线pdf，下面我向大家，推荐一个比较好的在线pdf阅读框架，pdf.js
JS下载PDF文件
weixin_46361785的博客
04-07 1287
JS下载PDF文件
pdf预览下载pdf.js
小聪的博客
10-12 309
下载pdf.js 官网地址 https://mozilla.github.io/pdf.js/ php代码 //转义两次php把中文字转义 $title =iconv("utf-8","gbk",urlencode(urlencode($info['pdf_name']))); $url=request()->domain(); $code_content = $url.'/static/pdf/web/viewer.html?file=/static/uploads/'.$info['pdf'].
pdf.js文件
08-08
pdf.js用于pdf预览功能，放到前端的static的文件夹下，
pdfjs
04-26
NULL 博文链接：https://canlynet.iteye.com/blog/2358805
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
pdfjs资源包
07-09
用于pdf文件的前端展示预览，纯js代码，基于解析pdf文件流的底层做法，因此兼容性超强。适合各种设备的html页面
vue-pdf预览pdf文件流
01-13
在Vue.js应用中，预览PDF文件流是一个常见的需求，特别是在处理在线文档或者需要展示PDF内容的场景下。`vue-pdf`是一个强大的插件，它允许我们在Vue组件中轻松地集成PDF预览功能。这个插件是基于PDF.js库构建的，PDF...
vue-pdf预览pdf文件流示例
12-26
在Vue.js应用中，预览PDF文件流是一个常见的需求，特别是在网页中展示来自服务器的数据或者动态生成的PDF文档。Vue-pdf库提供了解决这个问题的有效工具。这个库允许开发者在Vue组件中直接渲染PDF文件，无需将文件...
使用vue-pdf预览PDF文件地址
最新发布
08-23
在Vue中使用`vue-pdf`预览PDF文件，你需要做以下几个步骤： 1. **安装依赖**：首先确保已经安装了`vue-pdf`库。如果没有，可以使用npm或yarn进行安装： ```bash npm install vue-pdf --save # 或者 yarn add vue-pdf ``` 2. **引入并注册组件**：在你的Vue组件中引入`PDFViewer`组件并注册到Vue实例中： ```js import Vue from 'vue'; import PDFViewer from 'vue-pdf'; Vue.use(PDFViewer); ``` 3. **在模板中使用PDFViewer**： 在你的组件模板里，通过`:src`属性指定PDF文件的URL，比如： ```html <template> <div> <pdf-viewer :src="pdfUrl" @error="handlePdfError"></pdf-viewer> </div> </template> ``` `pdfUrl`是数据绑定变量，存储你的PDF文件链接，例如： ```js data() { return { pdfUrl: 'https://example.com/path/to/your-pdf-file.pdf' }; }, methods: { handlePdfError(error) { // 处理加载失败的情况 console.error('PDF loading error:', error); } } ``` 4. **处理错误**： 可能会遇到网络连接问题或其他错误，所以要设置处理函数来捕获并处理这些异常。 记得检查你的PDF文件是否可用以及网络连接情况，因为`vue-pdf`是异步加载的。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值