vue项目中实现预览pdf

vue项目中实现预览pdf

1. iframe

<iframe :src="pdfSrc"></iframe>
​data() {return {pdfSrc: 'http://192.168.0.254:19000/trend/2023/12/27/5635529375174c7798b5fabc22cbec45.pdf',}},​iframe {width: 100%;height: calc(100vh - 132px - 2 * 20px - 160px);}
2. vue-pdf

npm i vue-pdf --save-dev

<!--* @Description: vue-pdf使用* @Author: mhf* @Date: 2023-12-28 11:37:30
-->
<template><div class="systemDescription"><div class="systemDescription-header">vue-pdf使用</div>
​<lineH style="margin: 20px 0"/>
​<div class="systemDescription-pdf"><pdfv-for="i in numPages":key="i":src="pdfSrc":page="i"></pdf></div></div>
</template>
​
<script>
import pdf from 'vue-pdf'
​
export default {name: 'systemDescription',components: { pdf },props: {},data() {return {pdfSrc:'http://192.168.0.254:19000/trend/2023/12/27/5635529375174c7798b5fabc22cbec45.pdf',numPages: undefined,}},methods: {},created() {},mounted() {let src = pdf.createLoadingTask(this.pdfSrc);src.promise.then(pdf => {this.numPages = pdf.numPages; // 解决vue-pdf默认只展示第一页的问题});}
}
</script>
​
<style lang="scss" scoped>
.systemDescription {padding: 50px 30px 40px;
​&-header {font-size: 26px;font-family: Source Han Sans CN;font-weight: 700;color: #333;text-align: center;}
​&-pdf {margin: 0 0 0 -24px;width: calc(100% + 50px);height: calc(100vh - 132px - 2 * 20px - 180px);overflow-y: auto;}
}
</style>

参考:解决vue-pdf默认只展示第一页的问题
使用vue-pdf展示静态PDF文件的时候(在线PDF可使用embed标签查看),常规操作之后发现只能加载第一页PDF,以下是解决方案:
​
vue-pdf使用过程如下:
​
$ yarn add vue-pdf
or
$ npm install vue-pdf
​
​
在组件中使用:
<template><pdf src=""></pdf>
</template>
<script>import pdf from 'vue-pdf'exprot default {component: {pdf}}
</script>
​
这个时候,多页的PDF只会显示第一页,这时各位可以去查看一下vue-pdf的源码,我们可以发现,它的实现过程是将PDF按页绘制在canvas上的,其页码数oage默认值是1,展示第一页的canvas。所以我们主要使用两种方式处理。
​
第一种是使用v-for循环加载所有页面:
<template><pdf src=""></pdf>
</template>
<script>import pdf from 'vue-pdf'exprot default {component: {pdf}}
</script>
这个时候,多页的PDF只会显示第一页,这时各位可以去查看一下vue-pdf的源码,我们可以发现,它的实现过程是将PDF按页绘制在canvas上的,其页码数oage默认值是1,展示第一页的canvas。所以我们主要使用两种方式处理。
​
第一种是使用v-for循环加载所有页面:
​
<template><div><pdfv-for="i in numPages":key="i":src="src":page="i"style="display: inline-block; width: 25%"></pdf></div>
</template><script>import pdf from 'vue-pdf'var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');export default {components: {pdf},data() {return {src: loadingTask,numPages: undefined,}},mounted() {this.src.promise.then(pdf => {this.numPages = pdf.numPages;});}
}</script>
这样有一个问题就是如果页数非常多,加载会很慢。
​
第二张是采用分页的形式:
<template><div class="onlineHelp cg-box"><div class="tools"><div class="page">第 {{pageNum}} /{{pageTotalNum}}页 </div><el-input v-model.number="goPageNum" style="width: 70px;margin-right: 8px"></el-input><el-button type="success" @click.stop="goPage"> 前往</el-button><el-button type="primary" @click.stop="prePage"> 上一页</el-button><el-button type="primary" @click.stop="nextPage"> 下一页</el-button></div><div class="pdf-box"><pdf ref="pdf":src="url":page="pageNum"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {name: 'onlineHelp',components: {pdf},data() {return {url: `${process.env.VUE_APP_BASEURL}/help.pdf`,pageNum: 1,pageTotalNum: 1,// 加载进度loadedRatio: 0,curPageNum: 0,goPageNum: 1};},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},// 前往页数goPage() {if(!this.goPageNum || /\D/.test(this.goPageNum) || this.goPageNum < 1 || this.goPageNum > this.pageTotalNum) {this.$message.warning('输入页码有误')return}this.pageNum = this.goPageNum},// 页面加载回调函数,其中e为当前页数pageLoaded(e) {this.curPageNum = e},// 其他的一些回调函数。pdfError(error) {console.error(error)}}
};
</script>
​
<style lang="scss">
.onlineHelp {height: 100%;position: relative;display: flex;justify-content: center;.tools {position: absolute;top: 10px;right: 10px;z-index: 999;.page {display: inline-block;margin-right: 10px;}}.pdf-box {height: 100%;overflow: auto;width: 90%;}
}
</style>
​
​
二、
<template><div class="wrap"><pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item"/></div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {components:{pdf},data(){return{pdfUrl: "http://192.168.0.223:8080/pdf/预报.pdf",pdfSrc: "",numPages: "",}},mounted(){this.getTitlePdfurl();},methods:{getTitlePdfurl(){this.pdfSrc = pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory });//解决中文乱码问题this.pdfSrc.promise.then((pdf) => {this.numPages = pdf.numPages;})},}
}
</script>
<style lang="less" scoped>
.wrap{position: absolute;left: 0;right: 0;top: 0;bottom: 0;
}
</style>

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

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

相关文章

MATLAB --- interp1( )函数的用法

interp1() 是 MATLAB 中用于一维插值的函数&#xff0c; 它可以根据给定的数据点进行插值&#xff0c;从而在给定的插值点处估计函数的值 下面是 interp1() 函数的用法&#xff1a; Vq interp1(X, V, Xq) Vq interp1(X, V, Xq, method) Vq interp1(X, V, Xq, method, extr…

数据结构:堆的三部曲 (一)堆的实现

堆的实现 1.堆的结构1.1堆的定义理解 2.堆的实现&#xff08;以小根堆为例&#xff09;2.1 堆结构体的定义2.2 堆的插入交换函数向上调整算法插入函数的代码 2.3 堆的删除向下调整算法&#xff1a;删除函数的代码&#xff1a; 2.4其他操作 3.测试以及完整源代码实现3.1测试代码…

typore自定义删除线快捷键

打开高级设置 设置快捷键 重新打开typore

Java实现短信发送业务

1、业务需求 发送短信功能是一个很普遍的需求&#xff0c;比如验证码&#xff0c;快递单号&#xff0c;通知信息一类。 而在Java中实现短信功能相对简单&#xff0c;只需要调用短信服务商提供的API。接下来以阿里云为例&#xff0c;介绍如何实现短信发送功能&#xff0c;其他短…

x-cmd pkg | bat - cat 命令的现代化替代品

目录 简介首次用户功能特点进一步阅读 简介 bat 是 cat 命令的替代品&#xff0c;对 cat 命令进行功能扩展&#xff0c;如语法高亮、自动分页等&#xff0c;为用户提供更友好的显示和定制选项。对于需要在终端频繁查看文本内容的用户&#xff0c;推荐用 bat。 首次用户 使用 …

xinference

xinference Xorbits Inference&#xff08;xinference&#xff09;是一个性能强大且功能全面的分布式推理框架。可用于大语言模型&#xff08;LLM&#xff09;&#xff0c;语音识别模型&#xff0c;多模态模型等各种模型的推理。通过 Xorbits Inference&#xff0c;你可以轻松地…

计算机基础面试题 |01.精选计算机基础面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

linux 休眠唤醒中设备、总线、用户进程、内核线程调试分析流程

一、suspending consoles打印 代码位置&#xff1a;Kernel/power/suspend.c 函数调用流程&#xff1a;devices_and_enter(suspend_state_t state) --> suspend_console(); void suspend_console(void) { if (!console_suspend_enabled) 注释这一行&#xff0c;可以看到…

企业级依赖管理: 深入解读 Maven BOM

一、背景 当开发者在一个大型项目中使用 Maven 进行依赖管理时&#xff0c;项目往往会包含多个模块或子项目&#xff0c;并且这些模块会共享相同的依赖项。但是&#xff0c;不同模块可能会独立地指定各自的依赖版本&#xff0c;这可能导致以下问题&#xff1a; 依赖版本不一致…

头歌:实验十六 matplotlib数据可视化

第1关 各省gdp的和生成条状图 import pandas import matplotlib matplotlib.use(Agg) import matplotlib.pyplot as plt matplotlib.rcParams[font.family]SimHei matplotlib.rcParams[font.sans-serif] [SimHei] datapandas.read_excel("test/各省GDP.xlsx",dtype…

在多Module项目中,给IDEA底部选项卡区域添加Services选项卡

一般一个spring cloud项目中大大小小存在几个十几个module编写具体的微服务项目。此时&#xff0c;如果要调试测需要依次启动各个项目比较麻烦。 idea其实提供了各module的启动管理工具了&#xff0c;可以快速启动和关闭各个服务&#xff0c;也能批量操作&#xff0c;比如一次…

25. 数组作为函数参数

写代码时&#xff0c;我们会将数组作为参数传给函数 冒泡排序&#xff1a; 两两相邻的元素进行比较&#xff0c;可能的话进行交换 一趟冒泡排序会将一个元素放在其最后应该在的位置 10个数字只需9趟&#xff0c;第一趟10个数字待排序&#xff0c;9对比较&#xff1b;第二趟…

计算机科学速成课【学习笔记】(1)——计算机早期历史

本集课程B站链接&#xff1a; 【计算机科学速成课】[40集全/精校] - Crash Course Computer Science_哔哩哔哩_bilibili【计算机科学速成课】[40集全/精校] - Crash Course Computer Science共计40条视频&#xff0c;包括&#xff1a;1. 计算机早期历史-Early Computing、2. 电…

【2024最新版】neo4j安装配置

neo4j安装 写在最前面下载配置环境&#xff08;还是不行&#xff1f;&#xff09;启动neo4jpython中调用 写在最前面 之前我安装过&#xff0c;还写了一篇笔记 结果意外发现没有了&#xff0c;而且和之前安装的步骤不一样了&#xff0c;因此再次记录安装过程 下载 https://ne…

vue3安装vue-json-viewer实现json格式化

一、安装插件 直接看效果&#xff1a;json格式化 安装版本不宜过旧也不宜过新&#xff0c;针对vue3安装这个版本即可 yarn add vue-json-viewer;"dependencies": {"vue-json-viewer": "3",}, 二、使用插件 <script> import JsonViewe…

Vue中的keep-alive缓存组件的理解

<keep-alive> 是一个抽象组件&#xff0c;用于将其内部的组件保留在内存中&#xff0c;而不会重新渲染。这意味着当组件在<keep-alive> 内部切换时&#xff0c;其状态将被保留&#xff0c;而不是被销毁和重新创建。 <keep-alive>用来缓存不经常变化的组件&am…

HLS 2017.4 导出 RTL 报错:ERROR: [IMPL 213-28] Failed to generate IP.

软件版本&#xff1a;HLS 2017.4 在使用 HLS 导出 RTL 的过程中产生如下错误&#xff1a; 参考 Xilinx 解决方案&#xff1a;https://support.xilinx.com/s/article/76960?languageen_US 问题描述 DESCRIPTION As of January 1st 2022, the export_ip command used by Vivad…

机器学习笔记 - 基于Python的不平衡数据的欠采样技术

一、简述 随着从不同的来源生成和捕获大量数据。尽管信息量巨大,但它往往反映了现实世界现象的不平衡分布。数据不平衡的问题不仅仅是统计上的挑战,它对数据驱动模型的准确性和可靠性具有深远的影响。 以金融行业欺诈检测为例。尽管我们希望避免欺诈,因为其具有高度破坏性,…

在Mac上恢复SD卡数据的 6 个有效应用程序

慌&#xff01;SD卡里的照片和视频不小心删了&#xff0c;Mac设备上还恢复不了数据&#xff01; 遇到这种情况&#xff0c;你需要的是一款可靠的Mac适用的SD卡恢复软件。我们为你准备了一份最佳的SD卡恢复软件列表&#xff0c;并且还有详细的评论。另外&#xff0c;我们还会给…

深入解析 Spring 的 @Autowired:自动装配的魔法与细节

Autowired 是 Spring 框架中的一个重要注解&#xff0c;用于自动装配 bean 依赖。Spring 通过 Autowired 可以自动将匹配的 bean 注入到需要的地方&#xff0c;如属性、构造函数或 setter 方法等。 下面是 Autowired 注解的详细说明&#xff1a; 作用 自动装配&#xff1a;A…