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.rhkb.cn/news/376603.html

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

相关文章

数据仓库哈哈

数据仓库 基本概念数据库&#xff08;database&#xff09;和数据仓库&#xff08;Data Warehouse&#xff09;的异同 整体架构分层架构方法论ER模型&#xff08;建模理论&#xff09;维度模型 何为分层第一层&#xff1a;数据源&#xff08;ODS ER模型&#xff09;设计要点日志…

python中的os模块和shutil模块

目录 os 1. 获取当前脚本绝对路径 2.获得工作路径&#xff1b; 3.该路径文件和目录 4.walk&#xff0c;查看目录下所有的文件&#xff08;含子孙文件&#xff09; 5.创建文件夹 6.os.makedirs(path) 7.路径拼接 8. 获取当前文件的上级目录 9.判断路径是否存在 10.是…

一 GD32 MCU 开发环境搭建

GD32 系列为通用型 MCU &#xff0c;所以开发环境也可以使用通用型的 IDE &#xff0c;目前使用较多的是 KEIL、 IAR 、 GCC 和 Embedded Builder &#xff0c;客户可以根据个人喜好来选择相应的开发环境。 目录 1、使用 Keil 开发 GD32 目前市面通用的MDK for ARM版本有Kei…

WPF学习(2) -- 样式基础

一、代码 <Window x:Class"学习.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend/2008&…

Contact Form联系表单自动发送邮件(超级简单)

前几天发现了aoksend推出的这个联系表单的组件&#xff0c;非常好用&#xff0c;只有一个php文件&#xff0c;把php文件放到网站主目录里面。然后去aoksend注册和配置好域名和发信邮箱&#xff0c;可以得到发送密钥&#xff1a;app_key&#xff0c;然后配置好邮件模板&#xff…

Linux常见配置

linux 常见配置 一、配置固定IP Centos配置固定IP 使用vim编辑/etc/sysconfig/network-scripts/ifcfg-ens33文件&#xff0c;填入如下 二、配置环境变量 1、将要配置的环境变量写入相应文件 ~/.bashrc # 用户环境变量配置文件 /etc/profile # 全局环境变量配置文件2、执行…

安防视频监控/云存储/视频汇聚EasyCVR平台播放设备录像不稳定,是什么原因?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;EasyCVR基于云边端一体化架构&#xff0c;具有强大的数据接入、处理及分发能力&#xff0c;可提供7*24小时实时高清视频监控、云端录像、云存储、录像检索与回看、智能告警…

无障碍全免费上手智能体:Autogen Studio结合Deepseek Coder打造一款AI旅游规划师

本文的唯一目的是通过打造一款AI旅游规划师&#xff0c;通俗易懂、深入浅出的讲清楚AI应用的大方向-智能体-的原理。 无需科学上网&#xff0c;无需付费API&#xff0c;无需编程能力&#xff0c;一小时即可部署、搭建一款复杂的、多代理交互的AI智能体-旅游规划师&#xff0c;…

【Linux】:文件fd

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家带来关于文件fd的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据…

FastAPI 学习之路(四十一)定制返回Response

接口中返回xml格式内容 from fastapi import FastAPI, Responseapp FastAPI()# ① xml app.get("/legacy") def get_legacy_data():data """<?xml version"1.0"?><shampoo><Header>Apply shampoo here.</Header&…

[笔记] SEW的振动分析工具DUV40A

1.便携式振动分析仪 DUV40A 文档编号&#xff1a;26871998/EN SEW是一家国际化的大型的机械设备供应商。产品线涵盖电机&#xff0c;减速机&#xff0c;变频器等全系列动力设备。DUV40A是他自己设计的一款振动分析工具。 我们先看一下它的软硬件参数&#xff1a; 内置两路传…

国内外大模型 SuperCLUE 基准测试

本心、输入输出、结果 文章目录 国内外大模型 SuperCLUE 基准测试前言国内外大模型 SuperCLUE 基准测试榜单什么是中文大模型基准 SuperCLUE国内外大模型 SuperCLUE 基准测试 编辑 | 简简单单 Online zuozuo 地址 | https://blog.csdn.net/qq_15071263 如果觉得本文对你有帮助,…

大数据开发中的数据驱动决策:关键问题与实践指南

目录 决策前的准备工作1. 我已经掌握了哪些信息&#xff1f;2. 我们已经做出决定了吗&#xff1f;3. 我们需要哪些额外信息以及何时需要&#xff1f; 决策过程中的关键问题1. 我们需要做这个决定吗&#xff1f;2. 错误地做出这个决定的代价是什么&#xff1f; 决策后的反思1. 我…

Excel第28享:如何新建一个Excel表格

一、背景需求 小姑电话说&#xff1a;要新建一个表格&#xff0c;并实现将几个单元格进行合并的需求。 二、解决方案 1、在电脑桌面上空白地方&#xff0c;点击鼠标右键&#xff0c;在下拉的功能框中选择“XLS工作表”或“XLSX工作表”都可以&#xff0c;如下图所示。 之后&…

数据库-三范式

第一范式 1 数据库所有字段都只有单一属性。 2 单一属性由基本数据类型构成。 3 数据库的表都是二维的行与列。 例如上面的例子就不满足第一范式&#xff0c;因为是可以继续拆分的&#xff0c;拆分为更多的属性。 第二范式 1 符合第一范式 2 表必须有个主建 3 其它字段可以…

印尼Facebook直播网络需要达到什么要求?

在全球化浪潮的推动下&#xff0c;海外直播正受到企业、个人和机构的广泛关注和青睐。无论是用于营销、推广还是互动&#xff0c;海外直播为各种组织提供了更多机会和可能性。本文将探讨在进行印尼Facebook直播前&#xff0c;需要满足哪些网络条件以确保直播的质量和用户体验。…

解决安卓tv 蓝牙遥控器配对后输入法弹不出来的问题

t972在蓝牙配对后&#xff0c;自带的LatinIME 输入法会出现弹不出来的现象。 经过分析&#xff0c;主要为蓝牙的kl 文件适配存在问题。解决如下&#xff1a; 1.新建 kl文件 这个需要结合选用的遥控器来设定名称&#xff0c;我这边的遥控器是按照如下配置的 Vendor_2b54_Pr…

初步探究Rust生态与图形界面编程

引言 Rust作为一种现代的、安全的系统编程语言&#xff0c;自2010年问世以来&#xff0c;逐渐在开发社区中崭露头角。它的内存安全保证、并发处理能力、以及无需垃圾回收机制的高性能特性&#xff0c;使得它成为了开发系统工具、网络服务、以及嵌入式系统的热门选择。然而&…

8-1 搭建solidity开发环境,自己定制一个truffle

8-1 搭建solidity开发环境&#xff0c;自己定制一个truffle&#xff08;react区块链实战&#xff09; 从零开始搭建一个项目 自己实现一套类似truffle的自动编译系统&#xff0c;加深理解 此处可以跳过无需自己实现编译合约的模块&#xff0c;使用已有的truffle模块即可 项目…

【JavaScript】解决 JavaScript 语言报错:Uncaught SyntaxError: Unexpected token

文章目录 一、背景介绍常见场景 二、报错信息解析三、常见原因分析1. 缺少必要的语法元素2. 使用了不正确的字符或符号3. JSON 格式错误4. 字符串未正确闭合 四、解决方案与预防措施1. 检查语法元素2. 正确使用符号和字符3. 修正 JSON 格式4. 字符串闭合 五、示例代码和实践建议…