保姆级vue-pdf的使用过程

第一步  引入vue-pdf

npm install --save vue-pdf

第二步 按照需求我们慢慢进行

01.给你一个pdf文件的url,需要在页面渲染

代码

<template><div><pdfref="pdf":src="url"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {components: {pdf},data() {return {url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",}}
}
</script>

这只是初体验,如果你的pdf只有一页,这样写当然没什么问题,但是当我们呢pdf 有很多页的时候,你会发现,这行不通了。所以,接下来,我们来看看怎么让它显示多页。

02.渲染多页面的pdf

<template><div><pdf v-for="i in numPages" :key="i"  :src="url" :page="i"></pdf></div>
</template><script>
import pdf from 'vue-pdf'
export default {components: {pdf},data() {return{url: '',numPages: 1,pdf: ''}},created() {this.pdf = require('vue-pdf')console.log('获取的pdf', this.pdf)},mounted: function() {this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")},methods: {getNumPages(url) {var loadingTask = pdf.createLoadingTask(url)// var loadingTask = this.pdf.default.createLoadingTask(url)loadingTask.promise.then(pdf => {this.url = loadingTaskthis.numPages = pdf.numPages}).catch((err) => {console.error('pdf加载失败')})},}
}
</script>

这里边如果你省去了promise,控制台会报错如下

 vue.runtime.esm.js:4605 [Vue warn]: Error in mounted hook: "TypeError: loadingTask.then is not a function"

还有需要了解的是你的 vue-pdf对象可以通过import去引,也可以通过require去引

各个属性:

  • url :pdf 文件的路径,可以是本地路径,也可以是在线路径。
  • numPages : pdf 文件总页数。

getNumPages 计算总页数,顺便给url和numPages赋值。

注意啊,这句不一定非要写到mounted里面,你想写哪就写哪,比如你前端请求后端,后端返回一个pdf 的url,在那里写就行,写在你需要的地方。

03.想不想让你的pdf带有分页交互及打印的功能,直接代码

<template><div><div class="tools" style="display: flex;justify-content: center;margin: 30px"><el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="prePage" class="mr10"> 上一页</el-button><el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="nextPage" class="mr10"> 下一页</el-button><div class="page" style="margin-top: 10px">{{pageNum}}/{{pageTotalNum}} </div><el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="clock" class="mr10"> 顺时针</el-button><el-button :theme="'default'" type="submit" :title="'基础按钮'" @click.stop="counterClock" class="mr10"> 逆时针</el-button></div><pdf ref="pdf":src="url":page="pageNum":rotate="pageRotate"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {name: 'Home',components: {pdf},data() {return {url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",pageNum: 1,pageTotalNum: 1,pageRotate: 0,// 加载进度loadedRatio: 0,curPageNum: 0,}},mounted: function() {},methods: {// 上一页函数,prePage() {var page = this.pageNumpage = page > 1 ? page - 1 : this.pageTotalNumthis.pageNum = page},// 下一页函数nextPage() {var page = this.pageNumpage = page < this.pageTotalNum ? page + 1 : 1this.pageNum = page},// 页面顺时针翻转90度。clock() {this.pageRotate += 90},// 页面逆时针翻转90度。counterClock() {this.pageRotate -= 90},// 页面加载回调函数,其中e为当前页数pageLoaded(e) {this.curPageNum = e},// 其他的一些回调函数。pdfError(error) {console.error(error)},}
}
</script>
  • page: 当前显示的页数,比如第一页page=1
  • rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转。
  • progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了。
  • page-loaded :页面加载成功的回调函数,不咋能用到。
  • num-pages :总页数
  • error :加载错误的回调
  • link-clicked:单机pdf内的链接会触发。

04.加载本地pdf的功能

先安装file-loader:

npm install --save file-loader

 然后在vue.config.js中加入以下内容:

module.exports = {chainWebpack: config => {const fileRule = config.module.rule('file')fileRule.uses.clear()fileRule.test(/\.pdf|ico$/).use('file-loader').loader('file-loader').options({limit: 10000,})},publicPath: './'
}

之后再url:require("../assets/1.pdf")就没有任何问题了,注意,vue-pdf src接收的是string对象,如果直接传url我这里报错了,你可能需要传url.default一下。

其他

打印界面字符乱码:

这个我倒是碰到了,谷歌浏览器打印的时候,预览界面真的变成了 真·方块字 ,全是方块。这个问题是因为你pdf中使用了自定义字体导致的,具体解决方案如下:

首先,找到这个文件:node_modules/vue-pdf/src/pdfjsWrapper.js

然后根据github上这个issue,其中红色的是要删掉的,绿色的是要加上去的,照着改就可以解决了。

地址: github.com/FranckFreib…

根据我的实际测试,是可以解决打印乱码的问题的。

跨域问题:

网上用pdf.js 很多都会遇到跨域问题,这个我今天实际应用到自己的项目里面了,由于我服务端设置了跨域,所以没有出现跨域的问题,如果出现跨域需要修改你后端的请求头。

写到这里已经是下班了,感谢老铁们的点赞,你们的点赞是我努力进步的动力

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/143004.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

灰度图处理方法

做深度学习项目图像处理的时候常常涉及到灰度图处理&#xff0c;这里对自己处理灰度图的方式做一个记录&#xff0c;后续有更新的话会在此更新 一&#xff0c;多维数组可视化 将多维数组可视化为灰度图 img_gray Image.fromarray(img, modeL) # 实现array到image的转换,m…

大数据-之LibrA数据库系统告警处理(ALM-12043 DNS解析时长超过阈值)

告警解释 系统每30秒周期性检测DNS解析时长&#xff0c;并把DNS解析时长和阈值&#xff08;系统默认阈值20000ms&#xff09;进行比较&#xff0c;当检测到DNS解析时长连续多次&#xff08;默认值为2&#xff09;超过阈值时产生该告警。 用户可通过“系统设置 > 阈值配置 …

深度学习 机器视觉 车位识别车道线检测 - python opencv 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 车位识别车道线检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满分5分) …

openEuler安全配置规范基线

# openEuler安全配置规范基线 ## 概述 安全配置规范基线是对系统配置项的推荐安全配置的集合&#xff0c;包含一系列的配置要求或建议&#xff0c;各配置项之间相互独立或存在一定的关联关系。基于安全配置规范基线指导修改系统配置&#xff0c;可以显著提升系统的整体安全防护…

Python算法——树的重建

Python中的树的重建算法详解 树的重建&#xff08;Tree Reconstruction&#xff09;是一种从给定的遍历序列中恢复原树结构的算法。在本文中&#xff0c;我们将讨论树的重建问题以及常见的重建算法&#xff0c;包括先序遍历和中序遍历序列重建二叉树&#xff0c;以及层序遍历序…

使用 Electron 来替代本地调试线上代理的场景

Cookie Samesite 问题 https://developers.google.com/search/blog/2020/01/get-ready-for-new-samesitenone-secure?hlzh-cnhttps://www.chromium.org/updates/same-site/https://github.com/GoogleChromeLabs/samesite-exampleshttps://releases.electronjs.org/releases/s…

python3中split()函数和int()函数的坑

&#xff08;一&#xff09; python3中的split()函数如果传入一个空字符&#xff0c;就会返回一个列表&#xff0c;该列表中有一个元素&#xff0c;此元素为空字符串。见如下代码&#xff0c; a "".split(",") for i,x in enumerate(a):print(f"i{i…

如何使用 docker 在本地部署 vite 项目

如何使用 docker 在本地部署 vite 项目 创建 Dockerfile 文件创建.dockerignore 文件构建镜像运行容器 1. 创建 Dockerfile 文件 # 使用官方的 Node 镜像作为基础镜像 FROM node:16.15.1# 设置工作目录 WORKDIR /usr/src/app# 将本地的 Vite 项目文件复制到工作目录 COPY . …

PieCloudDB Database 自研内存管理器 ASanAlloc:为产品质量保驾护航

内存管理是计算机科学中至关重要的一部分&#xff0c;它涉及到操作系统、硬件和软件应用之间的动态交互。有效的内存管理可以确保系统的稳定性和安全性&#xff0c;提高系统运行效率&#xff0c;帮助我们最大限度地利用有效的内存资源&#xff0c;合理分配和回收内存&#xff0…

【SQLite】的使用及指令| 编程操作(增删改查)

一、SQLite 使用和指令集 SQLite 的基本使用SQL 命令 二、常见的 SQL 数据类型 三、SQLite的命令用法 四、SQLite的编程操作 五、sqlite3_open函数 六、sqlite3_close函数 七、sqlite3_errcode函数 八、SQLite C Interface 九、sqlite3_exec函数 十、callback回调函数 十一、…

YOLOV5----修改损失函数-ShuffleAttention

主要修改yolo.py、yolov5s.yaml及添加ShuffleAttention.py 一、ShuffleAttention.py import numpy as np import torch from torch import nn from torch.nn import init from torch.nn.parameter import Parameterclass ShuffleAttention(nn.Module):def

RemoteWebDriver 远程启动Driver版本问题

由于系统部署原因&#xff0c;本地调试UI自动化脚本的时候&#xff0c;页面加载非常慢&#xff01;于是想在远程虚拟机上启动浏览器来执行操作。 下载了selenium-server-4.15.0.jar &#xff0c;并在远程机器上启动&#xff0c;CMD里执行java -jar selenium-server-4.15.0.jar …

【游戏开发算法每日一记】使用随机prime算法生成错综复杂效果的迷宫(C#,C++和Unity版)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Python小白之PyCharm仍然显示“No module named ‘xlwings‘”

Python小白之“没有名称为xlwings‘的模块”-CSDN博客文章浏览阅读8次。cmd 打开命令行&#xff0c;输入python出现>>>的提示格&#xff0c;输入import xlwings 回车&#xff0c;正常报错&#xff1a;No module named xlwings。输入python 回车后&#xff0c;再输入im…

宏观角度认识递归之求根节点到叶节点数字之和

LCR 049. 求根节点到叶节点数字之和 - 力扣&#xff08;LeetCode&#xff09; 理解题意分析子问题&#xff1a;给一个头节点&#xff0c;要返回该头结点左右子树的根结点到叶节点数字和。此处还需注意&#xff1a;在获取根结点到叶节点数字和的时候&#xff0c;要传递一个参数&…

openGauss学习笔记-121 openGauss 数据库管理-设置密态等值查询-使用JDBC操作密态数据库

文章目录 openGauss学习笔记-121 openGauss 数据库管理-设置密态等值查询-使用JDBC操作密态数据库121.1 连接密态数据库121.2 调用isValid方法刷新缓存示例121.3 执行密态等值查询相关的创建密钥语句121.4 执行密态等值查询相关的创建加密表的语句121.5 执行加密表的预编译SQL语…

ACM练习——第三天

今天继续练习C和ACM模式 在写题之前先了解一些新的知识 1.#include <algorithm> #include <algorithm> 是 C 标准库中的头文件之一&#xff0c;其中包含了一系列用于处理各种容器&#xff08;如数组、向量、列表等&#xff09;和其他数据结构的算法。这个头文件提供…

【Liunx】DHCP服务

【Liunx】DHCP服务 DHCP概述A.安装dhcpB.查看配置文件C.修改配置文件 DHCP概述 DHCP(Dynamic Host Configuration Protocol)i动态主机配置协议 DHCP是由Internet工作任务小组设计开发的&#xff0c;专门用于为TCP/IP网络中的计算机自动分配TCP/IP参数的协议。 口使用DHCP服务的…

56. 携带矿石资源

你是一名宇航员&#xff0c;即将前往一个遥远的行星。在这个行星上&#xff0c;有许多不同类型的矿石资源&#xff0c;每种矿石都有不同的重要性和价值。你需要选择哪些矿石带回地球&#xff0c;但你的宇航舱有一定的容量限制。 给定一个宇航舱&#xff0c;最大容量为 C。现在…

使用PHP编写采集药品官方数据的程序

目录 一、引言 二、程序设计和实现 1、确定采集目标 2、使用PHP的cURL库进行数据采集 3、解析JSON数据 4、数据处理和存储 5、数据验证和清理 6、数据输出和可视化 7、数据分析和挖掘 三、注意事项 1、合法性原则 2、准确性原则 3、完整性原则 4、隐私保护原则 …