关于vue实现前端预览PDF文件

最新推荐文章于 2024-07-29 15:31:57 发布
最新推荐文章于 2024-07-29 15:31:57 发布
阅读量6.5k 收藏 12
点赞数 1
分类专栏： web 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44036846/article/details/115581293
版权
本文总结了在Vue项目中预览PDF文件的三种方法：1) 使用vue-pdf组件，预览本地和在线文件，但面临跨域问题；2) 利用pdf.js，需处理本地和在线文件的路径问题，以及可能出现的跨域挑战；3) 通过iframe、embed、object元素预览，但在移动端应用中可能遇到自动跳转问题。作者最终选择了vue-pdf组件。
摘要由CSDN通过智能技术生成

关于vue实现前端预览PDF文件

几种情况

经过两天的踩坑。总结出以下几点

  1. 预览pdf分别有。预览本地pdf文件、预览服务端PDF文件、以及预览osspdf文件。
  2. 我又分别尝试了几种方法。这个重点说。。。

方法1

使用vue-pdf组件
先npm install vue-pdf
然后上代码

import pdf from 'vue-pdf'//导入;
components: {
   
	pdf
},
//页面
<pdf style="width: 100%;height: 300px;" ref="pdf"
最低0.47元/天 解锁文章
花生喂龙乄卝
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中预览PDF文档
小破孩的博客
03-24 2万+
今日接到需求，需要在项目的某个页面中自定义预览PDF文档，于是使用 vue-pdf 插件来实现，方法如下： 先安装 vue-pdf 插件 npm install --save vue-pdf 在页面中引用实现： <template> <div class="scrollBox"> <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"><
vue-pdf实现pdf预览
sajsd的博客
11-29 316
使用vue-pdf实现pdf预览
vue实现在线预览pdf文件和下载（pdf.js）
10-15
主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【vue预览PDF文件的几种方法】
最新发布
qq_43730272的博客
07-29 354
【代码】【vue预览PDF文件的几种方法】
VUE前端预览PDF参考
Matea's Record
10-11 339
VUE前端预览PDF参考
vue实现pdf预览的功能
weixin_46262744的博客
03-27 275
vue实现pdf预览的功能(流的方式）** 1.pdf我没下载包 npm i pdf 这个**
vue-pdf预览pdf文件流
01-13
在Vue.js应用中，预览PDF文件流是一个常见的需求，特别是在处理在线文档或者需要展示PDF内容的场景下。`vue-pdf`是一个强大的插件，它允许我们在Vue组件中轻松地集成PDF预览功能。这个插件是基于PDF.js库构建的，PDF...
vue中如何实现pdf文件预览的方法
10-18
通过在Vue组件中使用这个库，可以读取PDF文件并将其内容渲染到一个`<canvas>`元素中，从而无需下载即可在页面上预览PDF文件。 具体实现步骤如下： 1. 首先需要安装`pdfjs-dist`库到项目中，通过npm命令进行安装： ...
vue实现pdf预览
zhaoyan_love的博客
03-30 1万+
需求说明 实现一个通过vue，预览pdf,并支持滚动加载，可下载的插件 一、下载插件 vue-pdf npm install --save vue-pdf 二、创建组件 在src/components/下创建pdfAll.vue <template> <div class="pdf-all-container"> <div class="tool-container"> <el-button
vue实现pdf文档在线预览功能
10-15
主要为大家详细介绍了vue实现pdf文档在线预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue中实现pdf文件预览功能
热门推荐
zyy2045的博客
06-23 2万+
实现的功能就是点击预览按钮，弹出对话框在线预览pdf文件 实现此功能的前提是需要在Vue项目中安装组件vue-pdf，在终端命令行输入运行如下语句：
Vue 实现pdf文档预览（vue-pdf插件）
好记性，不如烂键盘。
09-23 1269
1. 安装依赖 2. 在需要的页面，和定义组件一样那种 引入、注册，使用插件。4.触发获取PDF的方法。
在vue中实现pdf预览功能（vue-pdf 的使用）
qq_48378883的博客
06-19 3071
window.open(url,"_blank") //跳转页面利用浏览器打开pdf （浏览器打开pdf可复制）this.gkbSrc=pdf.createLoadingTask('api接口')this.gkbSrc =pdf.createLoadingTask(api接口）1.下载安装vue-pdf插件。5.在data设置初始值。
【vue】vue项目中实现pdf预览功能
weixin_46682277的博客
07-07 1608
我用的方法是，所以前提得有一个后端返回的pdf文件路径，放到地址栏可以直接预览，而不是直接下载下来的。 实现方式如下： 最后的效果如下： 说明：pc端实现pdf预览方式蛮多的，也可以使用插件，也可以用，但需要用一个对话框组件去展示...
vue项目中实现预览pdf
博客简介
12-28 1002
【代码】vue项目中实现预览pdf。
vue预览PDF文件的几种方法
weixin_58495461的博客
05-13 6204
2.3 使用组件展示PDF文件。1.1页面结构 html。2.2 注册并引入组件。
vue预览pdf文件的几种方法
夜空孤狼啸的博客
01-26 9321
前端预览pdf的几种方法
vue前端实现预览pdf
06-07
要在 Vue 前端实现预览 PDF 文件，可以使用 PDF.js 开源项目。PDF.js 是一个使用 JavaScript 实现的 PDF 渲染器，可以在网页上直接渲染 PDF 文件。以下是实现步骤： 1. 安装 pdfjs-dist 包：可以使用 npm 或 yarn 安装，命令如下： ``` npm install pdfjs-dist ``` 2. 在 Vue 组件中引入 pdfjs-dist 包： ``` import pdfjsLib from 'pdfjs-dist'; ``` 3. 定义一个方法，用于加载和渲染 PDF 文件： ``` loadPdf(pdfUrl) { // 获取 PDF 文件的 ArrayBuffer 数据 const loadingTask = pdfjsLib.getDocument({ url: pdfUrl }); loadingTask.promise.then(pdf => { // 获取 PDF 第一页 const pageNumber = 1; pdf.getPage(pageNumber).then(page => { // 获取该页的 Canvas 渲染上下文 const canvas = document.getElementById('pdf-canvas'); const context = canvas.getContext('2d'); // 计算 Canvas 尺寸，使 PDF 渲染不失真 const viewport = page.getViewport({ scale: 1 }); const scale = canvas.width / viewport.width; const scaledViewport = page.getViewport({ scale }); // 渲染 PDF page.render({ canvasContext: context, viewport: scaledViewport }); }); }); } ``` 4. 在 Vue 模板中使用 Canvas 元素来显示 PDF： ``` <canvas id="pdf-canvas"></canvas> ``` 5. 在需要加载 PDF 的地方调用 loadPdf 方法即可： ``` this.loadPdf('your-pdf-url.pdf'); ``` 注意：需要在你的项目中引入 pdf.worker.js 文件，可以从 pdfjs-dist 包中获取，也可以从官网下载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值