Vue3 pdf.js将二进制文件流转成pdf预览

好久没写东西,19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件,如果Vue2换成Vue3了,顺带来一篇文章,pdf.js这个东西用来解决内网pdf预览,是个不错的选择。

首先去pdfjs官网,下载需要的文件

然后将下载的东西放到public文件下

接下来看一下代码

<auto-dialogtitle="PDF预览":visible="visible":appendToBody="true"@close="close"width="850px"id="pdfDialog"class="pdfDialog"><template #content><divclass="pdfContent"id="pdfContent"v-loading="loading"element-loading-text="PDF加载中..."><iframe v-if="showPdf" id="previewPdf" :src="pdfSrc" height="500px" width="100%"> </iframe></div></template></auto-dialog>
//方法
loading.value = truenextTick(async () => {let res = await Pdf({ filePath: props.src }).catch(() => {})if (res) {//实例读取文件对象const r = new FileReader()r.onload = function () {try {loading.value = false// this.result为FileReader获取blob数据,如果返回报错信息,则是正确的json数据,JSON.parse会正常转换//如果返回文件流,则JSON.parse时会报错,走catch代码块(进行正常的文件下载)const resData = JSON.parse(this.result)//resData是后端返回的json数据console.log(resData)if (resData.code !== 0) {ElMessage({message: resData.msg,type: "error"})return}} catch (error) {var binaryData = []binaryData.push(res)console.log(binaryData, "------------------------+++binaryData1111111111111111")let url = window.URL.createObjectURL(new Blob(binaryData, {type: "application/pdf"}))showPdf.value = trueloading.value = falsepdfSrc.value ="/pdf/web/viewer.html?file=" +encodeURIComponent(url) +"&myTime=" +new Date().getTime()}}r.readAsText(res)}})

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

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

相关文章

第4章 IT服务规划设计

第4章 IT服务规划设计 4.1 概述 规划设计处于整个IT服务生命周期中的前端&#xff0c;可以帮助IT服务供方了解客户的需求&#xff0c;并对其进行全面的需求分析&#xff0c;然后通过对服务要素&#xff08;包括人员、资源、技术和过程&#xff09;、服务模式和服务方案的具体…

OpenHarmony4.x 系统模拟器环境

先下载源码和编译程序&#xff1a; 首先查看 OpenHarmony4.1源码下载、编译&#xff0c;生成OHOS_Image可执行文件的最简易流程 准备在QEMU模拟器中运行ARM Cortex-M4的轻型开源鸿蒙系统 官方支持的开发板和模拟器种类-编译形态整体说明OpenAtom OpenHarmony 已支持的示例工…

ArduPilot开源代码之AP_MSP

ArduPilot开源代码之AP_MSP 1. 源由2. Library设计2.1 启动代码2.2 支持特性2.3 MSP DisplayPort v.s. DJI FPV OSD 3. 重要例程3.1 AP_MSP::init3.2 AP_MSP::loop3.3 AP_MSP::init_backend 4. 实例理解5. 总结6. 参考资料 1. 源由 AP_MSP是处理MSP协议格式的报文数据应用类。…

反向业务判断逻辑

业务功能需求&#xff1a; 根据id扣减用户余额 包括&#xff1a;判断用户状态是否正常判断用户余额是否充足 正向逻辑&#xff1a; 判断用户为正常下&#xff0c;判断用户余额充足&#xff0c;进行余额扣减&#xff1b; 》正向逻辑&#xff0c;多重嵌套&#xff0c;代码不美观…

✈️一文带你入门【NestJS】

✈️引言 在现代Web开发领域&#xff0c;框架和技术的迭代速度令人咋舌。其中&#xff0c;NestJS作为一款基于Node.js的后端框架&#xff0c;以其卓越的设计理念和强大的功能集&#xff0c;迅速吸引了众多开发者的眼球。本文将带你深入了解NestJS的起源、发展&#xff0c;以及…

SpringIOC原理

SpringIOC原理 1.概念 Spring通过一个配置文件描述Bean及Bean之间的依赖关系&#xff0c;利用Java语言的反射功能实例化Bean并建立Bean之间的依赖关系。Spring的IOC容器在完成这些底层工作的基础上&#xff0c;还提供了Bean实例缓存、生命周期管理、Bean实例代理、事件发布、…

AI提示词:AI辅导「数学作业」

辅导孩子作业对许多家长来说可能是一件头疼的事&#xff0c;但这部分工作可以在一定程度上交给AI来完成。 打开ChatGPT4,输入以下内容&#xff1a; # Role 数学辅导专家## Profile - author: 姜小尘 - version: 02 - LLM: Kimi - language: 中文 - description: 专门为小学生…

加密算法详解:对称加密、非对称加密、Hash算法

对称加密、非对称加密和哈希算法是信息安全中的三种主要加密技术&#xff0c;它们各自有不同的特点和用途&#xff1a; 对称加密&#xff08;Symmetric Encryption&#xff09; 工作原理&#xff1a;使用相同的密钥进行加密和解密。速度&#xff1a;通常非常快&#xff0c;适…

Elasticsearch:Node.js ECS 日志记录 - Morgan

这是之前系列文章&#xff1a; Elasticsearch&#xff1a;Node.js ECS 日志记录 - Pino Elasticsearch&#xff1a;Node.js ECS 日志记录 - Winston 中的第三篇文章。在今天的文章中&#xff0c;我将描述如何使用 Morgan 包针对 Node.js 应用进行日子记录。此 Morgan Node.j…

包装器 std::function

使用前&#xff0c;包头文件&#xff1a;#include <functional> std::function 是 C标准库 中的一个通用函数包装器&#xff1b; 它可以储存、复制、调用任何可调用的对象&#xff0c;包括&#xff1a;函数指针、成员函数、绑定的成员函数、lambda表达式、仿函数等。 1…

Selenium Grid- 让自动化分布式执行变得可能

什么是 Selenium Grid&#xff1f; Selenium Grid 是 Selenium 的三大组件之一&#xff0c;允许用户同时在不同的机器和系统上测试不同浏览器。 也就是说 Selenium Grid 支持分布式的测试执行。它可以让你的测试用例在一个分布式的执行环境中运行。 由上图可见&#xff0c;测试…

linux:基础知识及命令[图表]

lsof:查找文件 普通文件、目录、进程&#xff08;/proc&#xff09;、输入输出设备&#xff08;/dev&#xff09;、网络字节流socket、链接文件、管道文件 基本用法 lsof&#xff1a;列出所有打开的文件。lsof /path/to/file&#xff1a;列出打开指定文件的所有进程。lsof -…

大话光学原理:4.散射:瑞利、拉曼、米氏和布里渊

这是一缕柔和的光&#xff0c;在空气的舞台上轻盈地跳跃。它悠然自得&#xff0c;在宁静的空间中缓缓前行。然而&#xff0c;一片细薄透明的介质挡住了它的脚步&#xff0c;它毫无预兆地撞上了这片障碍。在这短暂的接触中&#xff0c;它被分解成无数微小的粒子&#xff0c;被迫…

增强现实(AR)与虚拟现实(VR)的区别?

随着科技的飞速发展&#xff0c;增强现实&#xff08;AR&#xff09;与虚拟现实&#xff08;VR&#xff09;技术在各个领域展现出巨大的潜力和应用前景。这两种技术虽然在体验和实现方式上有所不同&#xff0c;但都为用户提供了全新的感知体验。本文将详细解析AR和VR的概念、区…

机器视觉/自然语言/生成式人工智能综合应用实验平台-实训平台-教学平台

AIGC是人工智能1.0时代进入2.0时代的重要标志&#xff0c;MIT 科技评论也将Al合成数据列为2022年十大突破性技术之一&#xff0c;甚至将生成性Al(Generative Al) 称为是AI领域过去十年最具前景的进展。同时&#xff0c;AIGC领域岗位需求数量暴涨。高校方面在人工智能专业与机器…

javascript 处理###分隔的字符串

在 JavaScript 中&#xff0c;可以使用 split 方法将字符串按 ### 分隔成数组。以下是一个示例代码&#xff0c;展示了如何处理由 ### 分隔的字符串&#xff1a; 示例代码 // 示例字符串 let str "part1###part2###part3###part4";// 使用 split 方法按 ### 分隔字…

DEJA_VU3D - Cesium功能集 之 122-体元渲染(官方Voxels)

前言 编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小140个左右的功能,后续也会不断的追加,工作原因可能无法像以前那样周更2-3篇,但是闲下来还是会不定期的更新,Cesium…

tensorflow张量生成以及常用函数

张量tensor&#xff1a;多维数组&#xff08;列表&#xff09; 阶&#xff1a;张量的维数 维数 阶 名字 例子 0-D 0 标量 scalar s 1&#xff0c; 2&#xff0c; 3 1-D 1 向量 vector…

How do I format markdown chatgpt response in tkinter frame python?

题意&#xff1a;怎样在Tkinter框架中使用Python来格式化Markdown格式的ChatGPT响应&#xff1f; 问题背景&#xff1a; Chatgpt sometimes responds in markdown language. Sometimes the respond contains ** ** which means the text in between should be bold and ### te…

Python数据分析-天气类型预测分析

一、研究背景 近年来&#xff0c;随着全球气候变化的加剧&#xff0c;天气预报和气象预测变得越来越重要。准确的天气预测不仅能够帮助人们做好日常生活的安排&#xff0c;还能在农业生产、防灾减灾等方面起到关键作用。随着大数据技术和机器学习算法的快速发展&#xff0c;利…