vue项目预览pdf功能(解决动态文字无法显示的问题)

最近,因为公司项目需要预览pdf的功能,开始的时候找了市面上的一些pdf插件,都能用,但是,后面因为pdf变成了需要根据内容进行变化的,然后,就出现了需要动态生成的文字不显示了。换了好多好多的插件,都无法显示,直接无语了。 (pdf-vue3,pdf.js,vue3-pdfjs,vue-pdf-embed等插件无法显示动态文字)

先看效果:

        

 这个插件支持自定义功能,唯一的缺点就是有点庞大,其他的就很完美了。

········我先简单来说一下设计思路吧,将查看pdf的这个页面写成一个组件,然后将组件绑定一个路由,当我们在列表页点击查看pdf功能时,将pdf的地址通过路由传入到我们的查看pdf的组件当中,然后在组件中使用插件,从而渲染我们的pdf文件

按照下面的步骤开始进行操作

1,创建一个新的预览pdf的组件

<template><div class="table-container"><!-- <PDF :src="url"  :disableFontFace="true"/> --><!-- <vue-pdf-embed :source="{cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',url: url,}"/> --><!-- <PdfViewer v-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components/pdfjsDistPath'" ></PdfViewer><pdf v-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components'" /> --><iframe :src="'static/pdf/web/viewer.html?file=' + url + '#page=1'" style="width: 100%; height: 100%"></iframe>  <!--!!!!注意这里,这里需要注意的地方有2个,第一个是我们的url,这个就是我们要预览的pdf的地址,第二个是#page=1 ,这个是打开时默认先展示第一页 --></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'
// import pdf from '../../components/pdf/pdf'// import PDF from "pdf-vue3";// Plus
export default defineComponent({name: 'showpdf',directives: {},components: {},setup() {const route = useRoute()let url = ref()onMounted(() => {url.value = route.query.url// getNumPages(route.query.url)})// 思考 ref 响应式和 reactive 响应式的区别; 修改对象属性值,是否会刷新数据return {url}}
})
</script>
<style lang="stylus" scoped>.table-container{height: 100%;overflow: scroll;}</style>

基本上稍微懂一点vue应该就能到上方代码的写法,这里就不多赘述了,有些要注意的地方会加上注释

1,当创建好vue文件后,将该vue文件绑定在路由上

 3,我们在列表页获取到的pdf地址,通过路由传递到我们的pdf查看组件里。

       const examine = (item: any) => {router.push({path: '/report/showpdf',query: { url: item.fileUrl }})

4.在pdf路由组件里接收,并调用pdf查看器插件

 5,自定义

当我们渲染出pdf组件时,我们这时候看到,组件其实就是html渲染的,一般的都是画布渲染,可能这就是能显示动态文字的原因吧,既然是html渲染的,我们就能通过修改html来进行自定义功能啦,

 我们找到 web/viweer.html文件,找到我们需要操作的功能,注释隐藏或者添加即可,在js里写入功能即可

 6.结尾

后续我们把文件上传到csdn里,供大家免费下载,如果出现下载需要条件的情况下,可以直接私聊我,获取pdf预览查看,当要使用插件时,一定要阅读放插件文件夹里的提示文档!!

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

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

相关文章

Flink安装与使用

1.安装准备工作 下载flink Apache Flink: 下载 解压 [dodahost166 bigdata]$ tar -zxvf flink-1.12.0-bin-scala_2.11.tgz 2.Flinnk的standalone模式安装 2.1修改配置文件并启动 修改&#xff0c;好像使用默认的就可以了 [dodahost166 conf]$ more flink-conf.yaml 启动 …

【办公自动化】使用Python批量生成PPT版荣誉证书

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

RocketMQ消费者可以手动消费但无法主动消费问题,或生成者发送超时

1.大多数是配置问题 修改rocketmq文件夹broker.conf 2.配置与集群IP或本地IPV4一样 重启 在RocketMQ独享实例中支持IPv4和IPv6双栈&#xff0c;主要是通过在网络层面上同时支持IPv4和IPv6协议栈来实现的。RocketMQ的Broker端、Namesrv端和客户端都需要支持IPv4和IPv6协议&…

Python土力学与基础工程计算.PDF-螺旋板载荷试验

python 求解代码如下&#xff1a; 1. import numpy as np 2. 3. # 已知参数 4. p_a 100 # 标准压力&#xff0c; kPa 5. p np.array([25, 50, 100, 200) # 荷载&#xff0c; kPa 6. s np.array([2.88, 5.28, 9.50, 15.00) / 10 # 沉降量&#xff0c; cm 7. D 10 # 螺旋板直…

C语言:选择+编程(每日一练)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;尼科彻斯定理 示例1 题二&#xff1a;等差数列 示例2 本人实力有限可能对一些地方解释和理解的不够清晰&…

Redis知识(一)

目录 Redis过期删除和内存淘汰策略&#xff1a; 过期删除策略&#xff1a; 内存淘汰策略&#xff08;解决内存过大问题&#xff09;&#xff1a; LRU和LFU以及他们在Redis里的实现 主从复制 哨兵模式 缓存 缓存雪崩 缓存击穿 缓存穿透 数据库和缓存一致性问题 Redis…

windows下redis服务启动及.bat文件中中redis服务的启动

windows windows下redis服务的启动 1、不配置环境变量 找到redis服务的安装目录进入命令行窗口并输入命令redis-server.exe redis.windows.conf2、配置环境变量 将redis安装目录配置在path环境变量中之后就可以在cmd窗口的任意位置输入redis-server命令就可以启动redis服务…

材料行业可以转IC设计后端吗?

近来有许多材料行业的小伙伴通过后台来问我对于职业规划的看法&#xff0c;甚至有些小伙伴直接点明了某个行业适不适合自己&#xff0c;那么我这边仅以近年来比较热门的数字芯片设计来展开讲讲&#xff0c;材料适不适合转行做IC呢。 对于理工科的同学而言&#xff0c;选择哪个…

Graal 编译器

一开始,我们来讲一个故事。假设有一个名为 John 的开发人员,他正在尝试编写一些高性能的 Java 代码。他遇到了一些性能和速度问题,因为他的应用需要经常从大量的数据源中获取数据,并进行计算。他尝试了许多优化工具和技术,但是仍然无法满足他的需求。在这个时候,他听说了…

公告:微信小程序备案期限官方要求

备案期限要求 1、若微信小程序未上架&#xff0c;自2023年9月1日起&#xff0c;微信小程序须完成备案后才可上架&#xff0c;备案时间1-20日不等&#xff1b; 2、若微信小程序已上架&#xff0c;请于2024年3月31日前完成备案&#xff0c;逾期未完成备案&#xff0c;平台将按照…

Android Studio实现列表展示图片

效果&#xff1a; MainActivity 类 package com.example.tabulation;import android.content.Intent; import android.os.Bundle; import android.view.View;import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; im…

解决 Maven 创建 Spring Boot 项目时出现 “Cannot access alimaven“ 错误的方法

系列文章目录 文章目录 系列文章目录前言一、确认 Maven 配置二、创建 Spring Boot 项目三、修改项目的 Maven 配置四、清除 Maven 本地仓库五、重新构建项目总结前言 Maven 是 Java 项目的构建工具,而 Spring Boot 则是用于快速构建 Spring 应用程序的框架。但有时,在创建 …

Redis扩容与一致性Hash算法解析

推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 资源分享 「java、python面试题」来自UC网盘app分享&#xff0c;打开手机app&#xff0c;额外获得1T空间 https://dr…

Java导出数据到Excel

系列文章目录 文章目录 系列文章目录前言一、为什么需要导出数据到Excel?二、使用Java导出数据到Excel的步骤1.添加依赖2.编写导出逻辑3.运行测试总结前言 当今数据处理的场景中,Excel仍然是一个不可或缺的工具,用于存储、分析和共享数据。在Java应用程序中,有时候需要将数…

神经网络基础-神经网络补充概念-04-梯度下降法

概念 梯度下降法是一种常用的优化算法&#xff0c;用于在机器学习和深度学习中更新模型参数以最小化损失函数。它通过迭代地调整参数&#xff0c;沿着损失函数的负梯度方向移动&#xff0c;从而逐步逼近损失函数的最小值。 基本思想 梯度下降法的基本思想是&#xff1a;在每…

JVM——引言+JVM内存结构

引言 什么是JVM 定义: Java VirtualMachine -java 程序的运行环境 (ava 二进制字节码的运行环境) 好处: 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收功能数组下标越界检查&#xff0c;多态 比较: jvm jre jdk 学习jvm的作用 面试理解底层实现原理中…

神经网络基础-神经网络补充概念-63-残差网络

概念 残差网络&#xff08;Residual Network&#xff0c;ResNet&#xff09;是一种深度卷积神经网络结构&#xff0c;旨在解决深层网络训练中的梯度消失和梯度爆炸问题&#xff0c;以及帮助训练非常深的网络。ResNet 在2015年被提出&#xff0c;其核心思想是引入了"残差块…

前端-ES6

let 和 const 为了解决var的作用域的问题&#xff0c;而且var 有变量提升&#xff0c;会出现全局污染的问题 let 块状作用域&#xff0c;并且不能重复声明const 一般用于声明常量&#xff0c;一旦被声明无法修改&#xff0c;但是const 可以声明一个对象&#xff0c;对象内部的…

工作时使用redis,kafka查阅的资料链接

不分先后 一 、redis查阅地址 一篇文章讲清楚RedisRedis原理介绍一篇详文带你入门 Redis内存耗尽后Redis会发生什么Redis 深入了解键的过期时间redis持久化机制Redis延迟问题全面排障指南一文搞定Redis高级特性与性能调优Redis 在 Linux 系统的配置优化Redis 的延迟问题&…

SpringBoot-lombok

为什么要使用lombok? Lombok是一个通过注解以达到减少代码的Java库,如通过注解的方式减少getter,setter方法,构造方法等。通过注解的形式自动生成构造器、getter/setter、equals、hashcode、toString等方法&#xff0c;并可以自动化生成日志变量&#xff0c;简化java开发、提高…