vue的PDF预览插件(vue-pdf)，支持旋转、放大缩小、打印、下载等
2024-05-25 21:48:22
PDF预览插件
- 1、安装插件（vue-pdf）
- 2、引用注册pdf组件
- 3、pdf 常用属性与方法调用
- 4、常见报错
1、安装插件（vue-pdf）
npm i pdfjs-dist@2.5.207
npm i vue-pdf@4.2.0
2、引用注册pdf组件
import pdf from "vue-pdf";
...
components: {pdf,
},
<template><div class="pdf"><div class="show"><pdfref="pdf":src="pdfUrl":page="pageNum":rotate="pageRotate"@password="password"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum = $event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div><div class="pdf_footer"><div class="info"><div>当前页数/总页数：{{ pageNum }}/{{ pageTotalNum }}</div><div>进度：{{ loadedRatio }}</div><div>页面加载成功: {{ curPageNum }}</div></div><div class="operate"><div class="btn" @click.stop="clock">顺时针</div><div class="btn" @click.stop="counterClock">逆时针</div><div class="btn" @click.stop="prePage">上一页</div><div class="btn" @click.stop="nextPage">下一页</div><div class="btn" @click="scaleD">放大</div><div class="btn" @click="scaleX">缩小</div><div class="btn" @click="pdfPrint()">打印所有指定页</div><div class="btn" @click="pdfPrintAll()">打印所有</div><div class="btn" @click="logContent()">获取页面信息</div><div class="btn" @click="fileDownload(pdfUrl, 'pdf文件')">下载</div></div></div></div>
</template>
3、pdf 常用属性与方法调用
data() {return {pageTotalNum: 1, // 总页数pageNum: 1, // 当前页数loadedRatio: 0,// 加载进度curPageNum: 0, // 页面加载完成scale: 100, // 放大系数 默认百分百pageRotate: 0, // 旋转角度 ‘90’的倍数才有效};},methods: {//下载PDFfileDownload(data, fileName) {let blob = new Blob([data], {//type类型后端返回来的数据中会有，根据自己实际进行修改type: "application/pdf;charset-UTF-8",});let filename = fileName || "pdf.pdf";if (typeof window.navigator.msSaveBlob !== "undefined") {window.navigator.msSaveBlob(blob, filename);} else {var blobURL = window.URL.createObjectURL(blob);// 创建隐藏<a>标签进行下载var tempLink = document.createElement("a");tempLink.style.display = "none";tempLink.href = blobURL;tempLink.setAttribute("download", filename);if (typeof tempLink.download === "undefined") {tempLink.setAttribute("target", "_blank");}document.body.appendChild(tempLink);tempLink.click();document.body.removeChild(tempLink);window.URL.revokeObjectURL(blobURL);}},//放大scaleD() {this.scale += 5;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},//缩小scaleX() {// scale 是百分百展示 不建议缩放if (this.scale == 100) {return;}this.scale += -5;console.log(parseInt(this.scale) + "%");this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";},// 切换上一页prePage() {var p = this.pageNum;p = p > 1 ? p - 1 : this.pageTotalNum;this.pageNum = p;},// 切换下一页nextPage() {var p = this.pageNum;p = p < this.pageTotalNum ? p + 1 : 1;this.pageNum = p;},// 顺时针选中角度clock() {this.pageRotate += 90;},// 逆时针旋转角度counterClock() {this.pageRotate -= 90;},// pdf 有密码 则需要输入秘密password(updatePassword, reason) {updatePassword(prompt('password is "test"'));console.log("...reason...");console.log(reason);console.log("...reason...");},// 页面加载成功 当前页数pageLoaded(e) {this.$emit("current", e);this.curPageNum = e;},// 异常监听pdfError(error) {console.error(error);},// 打印所有pdfPrintAll() {this.$refs.pdf.print();},// 打印 第一页和第二页pdfPrint() {// 第一个参数 文档打印的分辨率// 第二个参数 文档打印的页数this.$refs.pdf.print(100, [1, 2]);},// 获取当前页面pdf的文字信息内容logContent() {this.$refs.pdf.pdf.forEachPage(function (page) {return page.getTextContent().then(function (content) {let text = content.items.map((item) => item.str);let allStr = content.items.reduce((initVal, item) => (initVal += item.str), "");console.log(allStr); // 内容字符串console.log(text); // 内容数组});});},},
4、常见报错
vue-pdf组件报错vue-pdf Cannot read properties of undefined (reading ‘catch‘)
vue-pdf组件报错vue-pdf Cannot read properties of undefined (reading ‘catch‘)
依赖版本解决报错问题
npm i pdfjs-dist@2.5.207
npm i vue-pdf@4.2.0
vue的PDF预览插件(vue-pdf)，支持旋转、放大缩小、打印、下载等相关推荐
- pdf预览在vue项目中的使用兼容ie浏览器
最近做项目有需求需要pdf在线预览并支持下载,而且还要兼容ie浏览器,之前又是使用过vue-pdf插件在chrome上没有问题但是在ie上不兼容.最后使用了pdf.Js这个原生库,虽然网上有许多使用教 ...
- 实现一个vue的图片预览插件
vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...
- vue-pdf 组件实现 pdf预览效果+点击打印按钮直接弹窗打印指定pdf文件
预览效果图: 打印指定文件效果图: 点击按钮 直接弹出该打印页面: 依赖: 实现预览+打印功能: npm install --save vue-pdf 代码: 打印部分:<a-button @c ...
- 好用的pdf预览插件
项目里用到的,放上来 引用js文件<script src="/js/pdfobject.js"></script> <script type=&quo ...
- 小程序pdf预览插件_如何下载小程序上的PPT与PDF? (苹果系统、安卓系统）
利用小程序下载资源,因其不需登陆不需注册,手机端的操作方便快捷,而受到大家的喜爱. 近日一些朋友操作不当,导致下载失败. 其实操作很简单! 安卓系统PPT下载视频演示:(PDF可与苹果手机一样操作) ...
- VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
- js 直接打开选择文件窗口_基于HTML5 构建的 Web端现代化PDF在线预览插件——PDF.js...
引言 PDF文件现在在许多企业中常用 - 无论您是要生成销售报告,交付合同还是发送发票,PDF都是首选的文件类型.PDF.js是由Mozilla编写的JavaScript库.由于它使用vanilla ...
- PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,**PDF** 类型文件的来源又包括 H5 移动端 和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
- 基于vue-pdf的PDF预览，缩放、旋转、拖拽、下一页
先说一下利用iframe打开pdf效果如下 代码如下这种感觉更简单,打印各方面都可以 <el-dialogv-if="showPdf":visible.sync=" ...
最新文章
- php调用C代码的方法详解
- 有关EUV光刻机，你需要知道这些
- iphone 保存到沙盒中的图片的读取
- Abp框架之执行Update-Database 命令系列错误
- shell unset之后数组元素个数为_PHP删除数组中指定值的元素的方法
- Javascript进阶：数据类型
- 算法之最长公共子序列(LCS)问题
- 如何查看Linux系统的带宽流量
- HTML：学习笔记之meta标签详解
- matlab颜色选取与绘制？（附有颜色全表）
- IPEX: SMA/UFL/IPEX/IPX接头，各代区别
- 屋里的大象：粒子物理学有自己的死神
- 《当下即是生活》季羡林——读书笔记
- Could not extract response: no suitable HttpMessageConverter found for response type [class java.lan
- P1157 组合的输出
- 激光扫描匹配之基于点的扫描匹配
- PLDA宣布在其XpressLINK™系列CXL控制器IP中支持CXL™ 2.0
- QCustomPlot频繁绘画大数据 卡顿，添加支持OpenGL加速
- FlexRay总线概述（1）
- Python：批量保存好看的图片到本地，爱了吗？