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)}})
相关文章:
Vue3 pdf.js将二进制文件流转成pdf预览
好久没写东西,19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件,如果Vue2换成Vue3了,顺带来一篇文章,pdf.js这个东西用来解决内网pdf预览,是个不错的选择。 首先去pdfjs官网,下载需要的文件 然后将下载…...
【机器学习】逻辑回归的原理、应用与扩展
文章目录 一、逻辑回归概述二、Sigmoid函数与损失函数2.1 Sigmoid函数2.2 损失函数 三、多分类逻辑回归与优化方法3.1 多分类逻辑回归3.2 优化方法 四、特征离散化 一、逻辑回归概述 逻辑回归是一种常用于分类问题的算法。大家熟悉的线性回归一般形式为 Y a X b \mathbf{Y}…...
Ubuntu22.04系统装好后左上角下划线闪烁不开机(N卡)
折腾了半天以为是ubuntu的系统和硬件不匹配, 最后发现的确有点关系, 就是显卡驱动的问题 解决办法: 1. 进入到safty模式下, 然后配好网络环境 2. 移除所有的驱动相关的包, sudo apt-get remove --purge nvidia* 3.…...
Leetcode刷题4--- 寻找两个正序数组的中位数 Python
目录 题目及分析方法一:直接合并后排序方法二:二分查找法 题目及分析 (力扣序号4:[寻找两个正序数组的中位数](https://leetcode.cn/problems/median-of-two-sorted-arrays/description/) 给定两个大小分别为 m 和 n …...
springBoot(若依)集成camunda
1、下图为项目结构 2、最外层 pom引入依赖 <properties><!--camunda 标明版本,注意要个自己的Spring 版本匹配,匹配关系自行查询官网--><camunda.version>7.18.0</camunda.version> </properties> 3、common模块引入依赖 …...
【微信小程序知识点】自定义构建npm
在实际开发中,随着项目的功能越来越多,项目越来越复杂,文件目录也变得很繁琐,为了方便进行项目的开发,开发人员通常会对目录结构进行优化调整,例如:将小程序源码放到miniprogram目录下。 &…...
JCR一区 | Matlab实现GAF-PCNN-MATT、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断
JJCR一区 | Matlab实现GAF-PCNN-MATT、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断 目录 JJCR一区 | Matlab实现GAF-PCNN-MATT、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断分类效果格拉姆矩阵图GAF-PCNN-MATTGASF-CNNGADF-CNN 基本介绍程序设计参考资料 分…...
新手教学系列——高效管理MongoDB数据:批量插入与更新的实战技巧
前言 在日常开发中,MongoDB作为一种灵活高效的NoSQL数据库,深受开发者喜爱。然而,如何高效地进行数据的批量插入和更新,却常常让人头疼。今天,我们将一起探讨如何使用MongoDB的bulk_write方法,简化我们的数据管理流程,让代码更加简洁高效。 常规做法:find、insertone…...
C# Winform 自定义事件实战
在C#的WinForms中,自定义事件是一种强大的工具,它允许你创建自己的事件,从而在特定条件下通知订阅者。自定义事件通常用于封装业务逻辑,使代码更加模块化和易于维护。下面我将通过一个实战例子来展示如何在WinForms中创建和使用自…...
Python通过继承实现多线程
本套课在线学习视频(网盘地址,保存到网盘即可免费观看): https://pan.quark.cn/s/677661ea63b3 本节将介绍如何利用Python中的thread模块和threading模块实现多线程,并通过继承threading.Thread类并重写run方…...
记一次项目经历
一、项目需求 1、设备四个工位,每个工位需要测试产品的电参数; 2、每个另外加四个位置温度; 3、显示4个通道电流曲线,16个通道温度曲线; 4、可切换工艺参数; 5、常规判定,测试数据保存到表格内&…...
Elasticsearch 8 支持别名查询
在 Elasticsearch 8 中,使用 Java 高级 REST 客户端进行别名管理的过程与之前的版本类似,但有一些API细节上的变化。以下是如何使用 Java 和 Elasticsearch 8 进行别名操作的例子: 引入依赖 确保你的项目中包含了 Elasticsearch 的高级 RES…...
【Spring Cloud】 使用Eureka实现服务注册与服务发现
文章目录 🍃前言🎍解决方案🚩关于注册中⼼🚩CAP理论🚩常见的注册中心 🎄Eureka🚩搭建 Eureka Server🎈创建Eureka-server ⼦模块🎈引入依赖🎈项目构建插件&am…...
JDK安装详细教程(以JDK17为例)
一、JDK的下载 1. 前往oracle官网下载JDK Java Archive Downloads - Java SE 17 在这里选择对应的JDK版本,我这里就直接选择JDK17的版本了。 然后下载对应的软件包,我这里采用的是Windows的安装程序。 点击上述圈起来的链接即可下载安装包,…...
安装nodejs | npm报错
nodejs安装步骤: 官网:https://nodejs.org/en/ 在官网下载nodejs: 双击下载下来的msi安装包,一直点next,我选的安装目录是默认的: 测试是否安装成功: 输入cmd打开命令提示符,输入node -v可以看到版本,说…...
聊点基础---Java和.NET开发技术异同全方位分析
1. C#语言基础 1.1 C#语法概览 欢迎来到C#的世界!对于刚从Java转过来的开发者来说,你会发现C#和Java有很多相似之处,但C#也有其独特的魅力和强大之处。让我们一起来探索C#的基本语法,并比较一下与Java的异同。 程序结构 C#程序…...
【C++】C++中SDKDDKVer.h和WinSDKVer.h函数库详解
目录 一.SDKDDKVer.h介绍 二.WinSDKVer.h介绍 三.WinSDKVer.h 和 SDKDDKVer.h 的区别 一.SDKDDKVer.h介绍 SDKDDKVer.h 是一个在 Windows 软件开发中常见的头文件,它用于定义软件开发工具包(SDK)和驱动开发工具包(DDK&…...
uni-app 蓝牙传输
https://www.cnblogs.com/ckfuture/p/16450418.html https://www.cnblogs.com/yangxiaobai123/p/16021058.html 字符串转base64:https://www.cnblogs.com/sunny3158/p/17312158.html 将 ArrayBuffer 对象转成 Base64 字符串:基础 - uni.arrayBufferT…...
MBR10200CT-ASEMI智能AI应用MBR10200CT
编辑:ll MBR10200CT-ASEMI智能AI应用MBR10200CT 型号:MBR10200CT 品牌:ASEMI 封装:TO-220 批号:最新 恢复时间:35ns 最大平均正向电流(IF):10A 最大循环峰值反向…...
力扣 爬楼梯
动态规划算法基础篇。 class Solution {public int climbStairs(int n) {int[] f new int[n 1];f[0] 1;f[1] 1;//当爬到n阶楼梯时,可知是由n-1阶或n-2阶楼梯而来for(int i 2; i < n; i) {f[i] f[i - 1] f[i - 2];//后面的每一阶种数由前两个状态得到}ret…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
