vue使用pdf.js 预览以及打印相关功能

最新推荐文章于 2024-06-13 17:53:35 发布
最新推荐文章于 2024-06-13 17:53:35 发布
阅读量6.8k 收藏 7
点赞数
分类专栏： 方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36939346/article/details/94034051
版权

不要用vue-pdf 只能预览不能有打印，当然如果只预览 就用这个更方便。
1.引入import PDFJS from ‘pdfjs-dist’
在这里插入图片描述
2.下载pdfjs将build web 和那个放在static下面。
在这里插入图片描述
3.引入iframe在这里插入图片描述
4.报错，打开web里面的viewer.js，屏蔽一行代码
在这里插入图片描述

就ok！！可以打印

在这里插入图片描述

西鱼
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue实现在线预览pdf文件和下载（pdf.js）
01-21
最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如jquery.media.js（ie无法直接浏览） 最后选择了pdf.js插件（兼容ie10及以上、谷歌、安卓，苹果） 强烈推荐改插件，以下介绍用法 （1）下载插件 下载路径： pdf.js （2）将下载构建后的插件放到文件中public（vue/cli 3.0） （3）在vue文件中直接使用，贴上完整代码 <iframe :src=pSrc width=100% height=100%></iframe> <
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
12-07
本文将详细介绍如何使用pdf.js插件来实现在Vue中手机预览PDF文档。 首先，pdf.js是一个由Mozilla维护的开源库，它允许在浏览器中渲染PDF文件，而无需依赖任何第三方插件。你可以从GitHub上克隆pdf.js项目，然后使用...
Vue中使用pdf.js实现在线预览pdf文件流
qq_45585640的博客
09-07 7918
方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。此时，pdf文件已经被渲染成了一张图片。以上就是在Vue中使用pdf.js实现在线预览pdf文件流的详细步骤。使用pdf.js的Renderer渲染pdf文件。此时，pdf文件已经加载到了pdf对象中。方法获取pdf页面的视图大小。
Vue页面生成PDF后调起浏览器打印
最新发布
Kino的博客
06-13 458
首先，需要安装 html2canvas 和 jsPDF 库。创建好后在main.js中引入方法。
pdfjs-dist预览pdf文件
zhangyizuishuai的博客
03-22 2405
react在项目中使用。
vue2+printJs插件实现网络打印
m0_72929120的博客
06-29 6268
主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件，无需离开界面，也无需使用嵌入。对于用户无需打开或下载 PDF 文件而只需打印它们的特殊情况。
vue pdf预览禁止打印
长春小佛爷的博客
04-19 666
1、肯定是先安装了： npm i pdfobject --save 2、引入 import pdf from 'pdfobject' <template> <div> <p class="over" /> <div id="pdf-content"> <el-container class="container" @contextmenu.native="handlePaste($event)" />
vue 项目中实现pdf预览 pdf打印 pdf下载
Guanchong333的博客
03-31 6060
前端可实现pdf 预览, 打印, 下载.
vue或uniapp项目使用pdf.js预览PDF文件
08-09
在这个项目中，你将学习如何利用pdf.js在Vue或UniApp环境下实现PDF预览功能，并对原代码进行必要的修改以解决潜在问题。 首先，让我们了解一下Vue和UniApp。Vue.js是一个轻量级的前端JavaScript框架，以其易学易用...
vue+pdf.js预览本地pdf文件（可以复制文本，滚动页码展示）
06-06
本示例中，我们将使用`pdf.js-dist`插件来实现这一功能，允许用户选择本地PDF文件并进行预览，同时支持文本复制、视图缩放以及通过滚动改变页码显示。以下是对这个过程的详细讲解。 首先，`pdf.js`是Adobe开发的一...
vue-pdf.js-demo-master.zip
09-24
"vue-pdf.js-demo-master.zip"是一个包含使用Vue.js集成pdf.js进行PDF预览的示例项目。这个压缩包中的资源提供了在Vue应用程序中实现PDF预览功能的具体步骤和代码。 1. **Vue.js 基础**： Vue.js的核心特性包括...
关于vue + pdfjs-dist v2.2.228 踩坑问题
ywenboy的博客
07-13 716
pdfjs-dist
vue项目使用Print.js插件实现PDF文件打印
tigerhhzz的博客
03-23 9080
vue项目使用Print.js插件实现PDF文件打印
js实现直接打印pdf文件内容解决方案
热门推荐
u010520850的博客
12-21 1万+
需求： 网页上通过js调用打印机打印pdf文件，然后直接打开打印机，就是直接打印，不用用户再次点击打印按钮，这样用户体验好， 经历: 我在网上找了资料就是使用window.print(),但是这个只是打印标签的内容，对于pdf的url里面的内容是打印不出的，听说网上有插件pdf.js等等. 感觉也没什么用，最后自己也不知道怎么搞，弄了很久就知道有人用iframe加载pdf再打印所以参考一下就真的可以打印，忽然感觉大神都在灯火阑珊处！ 主要代码: 标签iframe代码 1 .
vue 使用 PrintJs 实现打印pdf效果
王二的博客
03-08 4957
Print.js主要是为了帮助我们直接在应用程序中打印PDF文件，而无需离开界面，并且不使用嵌入。对于用户不需要打开或下载PDF文件的特殊情况，他们只需要打印它们。例如，当用户请求打印在服务器端生成的报告时，这种方法就很有用。这些报告将以PDF文件的形式发回。在打印这些文件之前不需要打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法PDF文件必须从托管您的应用的同一域提供。Print.js使用iframe在打印之前加载文件，因此，它受到同源策略的限制。
VUE获取PDF文件流在页面中直接掉起打印弹框
m0_50832030的博客
09-19 347
VUE获取PDF文件流在页面中直接掉起打印弹框
vue：pdf.js使用细节/隐藏按钮/设置、获取当前页码/记录阅读进度/切换语言（国际化）
smm的博客
02-24 6834
vue中使用pdf.js的细节问题调研：隐藏功能按钮，设置、获取当前页码（记录阅读进度）以及切换语言（国际化）
vue中使用PDF.js
m0_37296026的博客
01-24 1万+
PDF.js
在Vue中实现PDF预览和下载
三拾的博客
04-12 6564
通过上述步骤，我们可以在Vue中实现PDF预览和下载功能。使用PDF.js可以实现更多的PDF操作，如搜索、缩放等，可以根据具体需求进行扩展。
vue使用pdf.js在线预览
09-29
在Vue中使用pdf.js实现在线预览pdf文件流的步骤如下： 1. 首先，通过npm安装pdf.js，可以使用以下命令安装：npm install pdfjs-dist。 2. 然后，在需要使用pdf.js的组件中，引入pdf.js库，可以使用以下代码引入：import pdfjsLib from 'pdfjs-dist'。 3. 接下来，加载pdf文件流，可以使用pdf.js提供的API进行加载和渲染。你可以使用getDocument()方法加载pdf文件流，然后使用promise来处理加载成功后的逻辑。一旦加载成功，你可以使用render()方法将pdf页面渲染到指定的DOM元素中。 以下是一个简单的示例代码： ``` <template> <div> <canvas ref="pdfCanvas"></canvas> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { mounted() { this.loadPDF() }, methods: { async loadPDF() { const pdfUrl = 'path/to/your/pdf/file.pdf' const pdf = await pdfjsLib.getDocument(pdfUrl).promise const pageNumber = 1 // 你要加载的pdf页面的页码 const page = await pdf.getPage(pageNumber) const canvas = this.$refs.pdfCanvas const context = canvas.getContext('2d') const viewport = page.getViewport({ scale: 1 }) // 获取pdf页面的视图大小 canvas.width = viewport.width canvas.height = viewport.height const renderContext = { canvasContext: context, viewport: viewport } page.render(renderContext) } } } </script> ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值