Vue项目实现在线预览pdf，并且可以批量打印pdf的两种方法

原创 已于 2023-12-29 14:35:10 修改 · 7.2k 阅读 ·
大模型引用 1 次
cknow-ai 百思不得小李

cknow-ai 关注

标签
#vue.js #pdf #javascript
分类 前端开发
于 2023-07-18 14:47:39 首次发布
本文介绍了在Vue项目中实现在线预览PDF并批量打印的两种方法，包括使用vue-office-pdf插件和iframe标签。详细阐述了每种方法的实现步骤、注意事项及可能出现的问题，提供了解决方案。

最近遇到一个需求，就是要在页面上呈现pdf内容，并且还能用打印机批量打印pdf，最终效果如下：
在这里插入图片描述
当用户在列表页面，勾选中两条数据后，点击“打印表单”按钮之后，会跳到如下的预览页面：

请添加图片描述
请添加图片描述
预览页面顶部有个吸顶的效果，然后下方就展示出了2个pdf文件对应的内容，我们接着点击“打印”按钮，就会打开新的窗口，并且会出来打印窗口，如下图：
请添加图片描述
这里需要注意的是，我们在打印时需要取消默认的页眉页脚的勾，然后将边距改为无，这样就能保证打印的页面无页眉页脚且是居中显示内容的了，目标打印机选择好，点击"打印"就能打了。实现方式有两种，分别是利用vue-office-pdf插件和iframe标签嵌套pdf，现在我们来捋一下整个过程的实现方法及思路：

方法一

了解本专栏 订阅专栏 解锁全文 超级会员免费看
点赞 点赞 0
评论 0
书签 书签 8
vue中预览pdf
蜗牛~~
07-18 1万+
如果后端返回的pdf地址，粘贴到浏览器的url框中，可以在浏览器中直接进行预览的，那么我们就用window.open，或 a标签，或iframe标签通过设置src进行预览即可。可以直接使用window.open（'获取到的pdf地址'）重新打开一个浏览器页签。通过浏览器页签直接实现预览功能（预览页面的样式，根据浏览器的不同，会略有差异），这种情况，上述方法解决不了，需要使用插件或者设置浏览器请求头的方式来解决。后端返回了服务器文件pdf的地址，粘贴到浏览器的url框中，单页pdf可以直接使用。
vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库
qq_41985405的博客
01-11 9844
如果后端给的不是CDN地址，而是一些POST接口，该接口返回二进制流，则可以调用接口获取文件的ArrayBuffer数据，传递给src属性。通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。读取文件的ArrayBuffer。
零基础Vue Office文档预览终极指南：5分钟搞定Word/Excel/PDF在线查看
最新发布
gitblog_01121的博客
05-10 387
还在为Vue项目中集成Office文档预览而烦恼吗？vue-office文档预览组件库为你提供了一站式解决方案！无论你是Vue2还是Vue3开发者，都能轻松实现Word(.docx)、Excel(.xlsx/.xls)、PDF、PPT(.pptx)等多种格式的在线预览功能。本文将带你从零开始，快速掌握vue-office的使用技巧，解决文档预览的各种难题。 ## 为什么你需要vue-office
使用vue-office插件在线预览docx、.xlsx、pdf文件
smallqiang的专栏
04-22 4431
vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。
Vue - Vue 集成 pdf word excel 预览功能
weixin_39158686的博客
01-25 2484
vue-office是一款集合了docx、excel、pdf 三种文件预览的 Vue 组件库，在安装该组件之前需要先安装输入以下命令分别安装 word 、excel 和 pdf 三个预览插件卸载时运行安装后可在 Vue项目的 package.json 中查看安装依赖项。
VUE中使用vue-office/pdf预览PDF
wch19960518的博客
03-14 4494
预览PDF文件
vue实现 pdf 预览、翻页、打印、导出功能
weixin_44955769的博客
08-13 3603
话不多说看图 安装依赖 npm install --save vue-to-pdf main.js引入 import vueToPdf from 'vue-to-pdf'; Vue.use(vueToPdf); 全部代码 <template> <div> <div class="pdf-box"> <div> <el-button type="primary" @click="backPage">上一页&
vue-pdf实现pdf文件在线预览
苟冬新
07-31 464
有空改 npm install --save vue-pdf <template> <div> <pdf ref="pdf" :src="url" > </pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components:{
Vue实现在线预览打印PDF：web-print-pdf技术深度解析
Web打印社区，静默打印预览技术交流社区
08-13 2379
本文介绍了基于Vue3和web-print-pdf技术栈的在线PDF预览打印解决方案。系统采用Vue3+Electron架构，通过PDF-lib实现高性能PDF处理，提供实时预览、直接打印功能。核心组件采用左右分栏设计，左侧为PDF预览区，右侧为打印配置面板。重点讲解了页面变换算法，该算法支持三种缩放模式（shrink/noscale/fit），与Chrome打印预览保持完全一致，实现精确的页面变换和定位。系统适用于报表、合同、发票等各类打印场景，具有响应式设计、高性能渲染等优势。
vue里怎么使用pdf.js实现pdf文件的预览功能
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-10 1万+
你首先得准备一个pdf插件包，比如我这边的项目包里的public文件夹的lib文件夹下面就有一个pdf的插件包，里面包含build以及web两个文件夹。行，从而确定链接的参数file参数就是我们需要的pdf文件路径参数。其实实现这个预览代码量很少，核心代码就一行，接下来我介绍一下这个实现过程。比如我这边的写法就是下面的样子，这个就是预览的核心代码。我们打开viewer.js，有个默认的配置项。下载一个稳定版本的就行，目录大致如下。，直接访问浏览器就会下载该pdf。...
vue-officef实现pdf文件在线预览
ChenJin_2的博客
05-24 2416
vue-officef实现pdf文件在线预览
vue怎么实现office，PDF，图片，OFD文件预览
一步一个脚印，踏实努力，向着目标前进
06-15 1万+
要在Vue中实现Office、PDF、图片和OFD文件的预览，可以使用不同的第三方库来处理不同类型的文件。以下是一个详细的教程和代码示例，使用vue-pdf库来预览PDF文件，使用库来预览Office文件（如Word、Excel和PowerPoint），使用库来预览图片文件，使用库来预览OFD文件。
vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3
阿飞的博客
10-17 7513
本文章向大家介绍vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3。通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。通过网络地址预览示例如下，通过文件ArrayBuffer预览和上面docx的使用方式一致。支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3。一站式：提供docx、pdf、excel多种文档的在线预览方案，有它就够了。#excel文档预览组件。#docx文档预览组件。
Vue中实现pdf文件预览功能
zyy2045的博客
06-23 2万+
实现的功能就是点击预览按钮，弹出对话框在线预览pdf文件 实现此功能的前提是需要在Vue项目中安装组件vue-pdf，在终端命令行输入运行如下语句：
vue 在线预览PDF
weixin_40466351的博客
09-02 7208
vue 在线预览PDF
vue3 实现预览pdf的几种方式（vue3-pdf, iframe流展示，vue-office/pdf）
热门推荐
dj7858177的博客
07-20 2万+
要实现菜单（二级）绑定文件，并进行预览（点击菜单即触发），支持文件上传下载（绑定菜单）,文件以byte[]形式保存到数据库（至于为什么不用文件存储系统，因为这是领导定的 =，= 而且这个功能比较小，数据也不多，成本有限），同时，要解析pdf文件里的内容（固定模板），抓取部门段落信息单独保存；但是vue3-pdf通病，默认只展示第一页，所以需要获取页数，来通过v-for来把所有页都展示出来（如果页数多，再考虑做翻页操。vue3-pdf(因为是要作展示用，而且文档不是很多页，因此不考虑加入上下翻页，全展示)
Vue vue-office 预览docx、excel、pdf文件
qq_44747728的博客
12-04 1万+
在Vue中，我们可以使用一些第三方的插件或者组件来实现文件预览功能。比如，我们可以使用vue-office插件来预览PDF文件，文中所给的例子中使用了vue-office+element-ui。
Vue中如何进行文件打印与PDF导出
Java徐师兄的博客
06-15 7228
在Vue应用中，可以通过浏览器提供的方法实现文件打印的功能，也可以通过第三方库如jsPDF和pdfmake实现PDF导出的功能。需要根据具体的需求选择合适的方法和库，并进行相应的调整和配置，以确保输出的文件符合用户的需求。
springboot +vue实现打印PDF（实现批量打印快递单）
yugege5201314的博客
12-04 1万+
批量打印快递单，打印pdf文件
Vue做docx/pdf/excle 文件预览
summer9826的博客
11-09 1万+
Vue做docx/pdf/excle 文件预览
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值