后端接口返回二进制文件,前端 window.opent预览展示
详细步骤
1.修改 PreviewApi 函数:
- 设置 responseType 为 ‘arraybuffer’,以接收二进制数据。
export const PreviewApi = (data) => request({method: 'post',url: '/dev-api/preview',responseType: 'arraybuffer',data
});
3.处理响应:
- 使用 new Uint8Array(response.data) 将 ArrayBuffer 转换为 Uint8Array。
- 使用 Blob 构造函数将 Uint8Array 转换为 Blob 对象。
- 使用 URL.createObjectURL 方法生成 Blob URL。
- 使用 window.open 方法在新窗口中打开生成的 Blob URL。
<template><div><button @click="onPreview(row)">预览 PDF</button></div>
</template><script>
import { ldjtPreviewApi } from '@/api/your-api-file'; // 引入你的 API 文件export default {data() {return {row: { qqlsh: 'example_qqlsh' } // 示例数据,实际使用时从父组件或其他地方获取};},methods: {onPreview(row) {ldjtPreviewApi({ qqlsh: row.qqlsh }).then((response) => {if (response.status === 200) {const binaryData = new Uint8Array(response.data);const url = this.binaryToPdfUrl(binaryData);console.log('Generated URL:', url);window.open(url);} else {this.$message({message: '请求失败',type: 'error'});}}).catch((error) => {this.$message({message: error.message || '请求出错',type: 'error'});})},binaryToPdfUrl(binaryData) {const blob = new Blob([binaryData], { type: 'application/pdf' });const url = URL.createObjectURL(blob);return url;}}
};
</script><style scoped>
/* 你可以在这里添加一些样式 */
</style>
手动验证二进制数据
你可以将二进制数据保存为文件,手动打开验证 PDF 文件是否有效。以下是一个示例代码:
function binaryToPdfFile(binaryData, filename) {const blob = new Blob([binaryData], { type: 'application/pdf' });// 创建一个临时的下载链接const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = filename;link.click();
}// 调用函数,将二进制数据保存为 PDF 文件
binaryToPdfFile(new Uint8Array(response.data), 'test.pdf');相关文章:
后端接口返回二进制文件,前端 window.opent预览展示
详细步骤 1.修改 PreviewApi 函数: 设置 responseType 为 ‘arraybuffer’,以接收二进制数据。 export const PreviewApi (data) > request({method: post,url: /dev-api/preview,responseType: arraybuffer,data });3.处理响应: 使用…...
基于STM32的红外遥控接收器
1. 引言 红外遥控技术广泛应用于电视、空调等家用电器的控制。通过本项目,我们将学习如何使用STM32开发板搭建一个红外遥控接收器,能够接收来自遥控器的信号,并在串口终端上显示按键信息。 2. 环境准备2.1 硬件需求 - STM32开发板࿰…...
K8S网络插件故障处理
1网络插件故障 1此故障问题处理方法 查询ip是否正常是否是主节点IP地址如果不是需要更改 更改方式 1 修改calico.yaml文件的相应参数 # Cluster type to identify the deployment type - name: IP_AUTODETECTION_METHOD #增加内容value: "interfaceens*" 或者 value…...
优化前端开发中的提示语设计基本原则
文章目录 一致1、同一对象,指称一致2、同一状态,描述一致3、同一行为,提示一致 简洁1、用词简短 条理1、上下呼应2、主次分明 亲和1、化“难”为易2、“礼”字当先3、正向表达 灵动1、用词多变2、远离平淡 契合1、身份契合2、产品契合 示例1、…...
飞凌嵌入式FET527N-C核心板现已适配Android 13
飞凌嵌入式FET527N-C核心板现已成功适配Android13,新系统的支持能够为用户提供更优质的使用体验。那么,运行Android13系统的FET527N-C核心板具有哪些突出的优势呢? 1、性能与兼容性提升 飞凌嵌入式FET527N-C核心板搭载了全志T527系列高性能处…...
uniapp 如何修改 返回按钮(左上角+物理按钮+侧滑)触发的返回事件
背景: 使用uniapp 开发安卓app,在用户编辑后直接返回时,使用弹窗提醒用户:还没有保存,是否保存? 方案 1. 使用自定义返回事件 //返回 back() { // 业务逻辑,弹窗提醒 uni.showModal({title:…...
appium启动 install driver安装驱动
appium启动 appiumPS C:\Windows\system32> appium [Appium] Welcome to Appium v2.12.1 [Appium] The autodetected Appium home path: C:\Users\liyd\.appium [HTTP] Could not start REST http interface listener. The requested port may already be in use. Please m…...
【机器学习】均方误差根(RMSE:Root Mean Squared Error)
均方误差根(Root Mean Squared Error,RMSE)是机器学习和统计学中常用的误差度量指标,用于评估预测值与真实值之间的差异。它通常用于回归模型的评价,以衡量模型的预测精度。 RMSE的定义与公式 给定预测值 和实际值 …...
[含文档+PPT+源码等]精品基于springboot实现的原生Andriod广告播放系统
基于Spring Boot实现的原生Android广告播放系统背景,主要可以从以下几个方面进行阐述: 一、市场需求与背景 移动互联网的快速发展: 随着移动互联网技术的不断进步,智能手机已成为人们日常生活中不可或缺的一部分。人们越来越多地…...
【机器学习】均方误差(MSE:Mean Squared Error)
均方误差(Mean Squared Error, MSE)是衡量预测值与真实值之间差异的一种方法。在统计学和机器学习中,MSE 是一种常见的损失函数,用于评估模型的预测准确性。 均方误差的定义 假设有一组真实值 和模型预测的对应值 。均方误…...
融合虚拟与现实,AR Engine为用户提供沉浸式交互体验
当今的应用市场中,传统的应用产品已经难以完全满足消费者的多样化需求。为了在竞争激烈的市场中脱颖而出,企业需要深入洞察用户需求,提供个性化的服务体验和差异化的产品创新,以吸引并留住消费者。 比如,购物类App通过…...
python | xmltodict,一个非常厉害的 关于XML数据 Python 库!
本文来源公众号“python”,仅用于学术分享,侵权删,干货满满。 原文链接:xmltodict,一个非常厉害的 Python 库! 大家好,今天为大家分享一个非常厉害的 Python 库 - xmltodict。 Github地址&am…...
教程:FFmpeg结合GPU实现720p至4K视频转换
将一个 720p 的视频放大编码到 4K,这样的视频处理在很多业务场景中都会用到。很多视频社交、短视频、视频点播等应用,都会需要通过服务器来处理大量的视频编辑需求。 本文我们会探讨一下做这样的视频处理,最低的 GPU 指标应该是多少。利用开源…...
MeterSphere接口自动化-ForEach循环
接口自动化场景:一个接口根据不同的参数取值来运行测试,本场景中只有一个参数来去不同值。举例如下: https:://test.csdn/query?placementList1接口,测试id1,2,3时,断言接口返回的data数据都有返回。(当然…...
ssm074应急资源管理系统+jsp(论文+源码)_kaic
毕 业 设 计(论 文) 题目:应急资源管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本应急资源管理系统…...
怎么对 PDF 添加权限密码或者修改密码-免费软件分享
序言 目前市面上有关PDF处理的工具有很多,不过绝大多数的PDF处理工具都需要付费使用,且很多厂商甚至连试用的机会也不给用户,偶有试用的,其试用版的条件也极为苛刻,比如只能处理前两页,或者只能处理非常小的…...
LVSM: A LARGE VIEW SYNTHESIS MODEL WITH MINIMAL 3D INDUCTIVE BIAS 论文解读
目录 一、概述 二、相关工作 1、新视角合成 2、优化3D表示 3、可泛化的前馈方法 三、LVSM 1、总体结构 2、encoder-decoder 3、decoder-only 4、Loss 一、概述 该论文提出大视角合成模型LVSM,基于Transformer方法,用于场景中或对象级层次从稀…...
7.《双指针篇》---⑦三数之和(中等偏难)
题目传送门 方法一:双指针 1.新建一个顺序表用来返回结果。并排序数组。 2.for循环 i 从第一个数组元素遍历到倒数第三个数。 3.如果遍历过程中有值大于0的则break; 4.定义左右指针,以及target。int left i 1, right n - 1; int target -nums[i];…...
鸿蒙ArkTS中的布局容器组件(Scroll、List、Tabs)
1、Scroll组件 Scroll组件是一个可滚动的容器组件,用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容,并通过滚动机制来查看全部内容。这对于显示大量信息(如长列表、长篇文本或大型图像等&…...
mybatis连接PGSQL中对于json和jsonb的处理
pgsql数据库表字段设置了jsonb格式;在java的实体里使用String或者对象转换会一直提示一个错误: Caused by: org.postgresql.util.PSQLException: ERROR: column "xx" is of type jsonb but expression is of type character varying 需要加一…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
