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;、服务模式和服务方案的具体…

✈️一文带你入门【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: 专门为小学生…

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;测试…

大话光学原理: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领域岗位需求数量暴涨。高校方面在人工智能专业与机器…

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;利…

科普文:深入理解负载均衡(四层负载均衡、七层负载均衡)

概叙 网络模型&#xff1a;OSI七层模型、TCP/IP四层模型、现实的五层模型 应用层&#xff1a;对软件提供接口以使程序能使用网络服务&#xff0c;如事务处理程序、文件传送协议和网络管理等。&#xff08;HTTP、Telnet、FTP、SMTP&#xff09; 表示层&#xff1a;程序和网络之…

基于vue的地图特效(飞线和标注)

这段代码的主要功能是在页面加载完成后&#xff0c;初始化一个 echarts 地图图表&#xff0c;并配置了相关的地理数据、散点数据、线条数据以及样式效果&#xff0c;最后在指定的 div 元素中进行展示。 需要再vue中的框架实现&#xff0c;不能单独直接运行。 标注 type: effe…

Python30 使用Gensim库实现Word2Vec对文本进行处理

1.Word2Vec Word2Vec 是一种将词语表示为向量的技术&#xff0c;能够捕捉词语之间的语义关系。它由 Google 的 Tomas Mikolov 等人在 2013 年提出&#xff0c;广泛应用于自然语言处理任务中。其核心概念主要包括&#xff1a; 词嵌入&#xff08;Word Embeddings&#xff09; …

使用昇腾芯片进行多卡训推时使用hccl_tools.py为npu分配ip报错问题解决办法

目录 问题描述问题产生原因解决办法最终执行并验证参考网站命令扩展 问题描述 昇腾芯片&#xff08;910b/310p等&#xff09;进行多卡训练或者推理时需要先获取并配置每张npu的ip信息&#xff0c;因此需要执行类似下面问题&#xff1a; python mindformers/tools/hccl_tools.…

[AI 大模型] Meta LLaMA-2

文章目录 [AI 大模型] Meta LLaMA-2简介模型架构发展新技术和优势示例 [AI 大模型] Meta LLaMA-2 简介 Meta LLaMA-2 是 Meta 推出的第二代开源大型语言模型&#xff08;LLM&#xff09;&#xff0c;旨在为研究和商业应用提供强大的自然语言处理能力。 LLaMA-2 系列模型包括从…

Python29 Tensorflow的基本知识和使用

1. TensorFlow TensorFlow 是一个开源的机器学习框架&#xff0c;由 Google Brain 团队开发。它用于数据流图的计算&#xff0c;尤其擅长深度学习任务。在 TensorFlow 中&#xff0c;数据流图&#xff08;Data Flow Graph&#xff09;是其核心概念之一&#xff0c;它定义了计算…

Blackbox AI : 全新的人工智能编码助手 您的高效AI开发全能助手

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 提起AI 智能编码助手&#xff0c;相信到了如今大家都不陌生。其对我们开发的代码时的效率有显著的提升&#xff0c;可以说…