当前位置: 首页 > news >正文

后端接口返回二进制文件,前端 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 函数&#xff1a; 设置 responseType 为 ‘arraybuffer’&#xff0c;以接收二进制数据。 export const PreviewApi (data) > request({method: post,url: /dev-api/preview,responseType: arraybuffer,data });3.处理响应&#xff1a; 使用…...

基于STM32的红外遥控接收器

1. 引言 红外遥控技术广泛应用于电视、空调等家用电器的控制。通过本项目&#xff0c;我们将学习如何使用STM32开发板搭建一个红外遥控接收器&#xff0c;能够接收来自遥控器的信号&#xff0c;并在串口终端上显示按键信息。 2. 环境准备2.1 硬件需求 - STM32开发板&#xff0…...

K8S网络插件故障处理

1网络插件故障 1此故障问题处理方法 查询ip是否正常是否是主节点IP地址如果不是需要更改 更改方式 1 修改calico.yaml文件的相应参数 # Cluster type to identify the deployment type - name: IP_AUTODETECTION_METHOD #增加内容value: "interfaceens*" 或者 value…...

优化前端开发中的提示语设计基本原则

文章目录 一致1、同一对象&#xff0c;指称一致2、同一状态&#xff0c;描述一致3、同一行为&#xff0c;提示一致 简洁1、用词简短 条理1、上下呼应2、主次分明 亲和1、化“难”为易2、“礼”字当先3、正向表达 灵动1、用词多变2、远离平淡 契合1、身份契合2、产品契合 示例1、…...

飞凌嵌入式FET527N-C核心板现已适配Android 13

飞凌嵌入式FET527N-C核心板现已成功适配Android13&#xff0c;新系统的支持能够为用户提供更优质的使用体验。那么&#xff0c;运行Android13系统的FET527N-C核心板具有哪些突出的优势呢&#xff1f; 1、性能与兼容性提升 飞凌嵌入式FET527N-C核心板搭载了全志T527系列高性能处…...

uniapp 如何修改 返回按钮(左上角+物理按钮+侧滑)触发的返回事件

背景&#xff1a; 使用uniapp 开发安卓app&#xff0c;在用户编辑后直接返回时&#xff0c;使用弹窗提醒用户&#xff1a;还没有保存&#xff0c;是否保存&#xff1f; 方案 1. 使用自定义返回事件 //返回 back() { // 业务逻辑&#xff0c;弹窗提醒 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)

均方误差根&#xff08;Root Mean Squared Error&#xff0c;RMSE&#xff09;是机器学习和统计学中常用的误差度量指标&#xff0c;用于评估预测值与真实值之间的差异。它通常用于回归模型的评价&#xff0c;以衡量模型的预测精度。 RMSE的定义与公式 给定预测值 和实际值 …...

[含文档+PPT+源码等]精品基于springboot实现的原生Andriod广告播放系统

基于Spring Boot实现的原生Android广告播放系统背景&#xff0c;主要可以从以下几个方面进行阐述&#xff1a; 一、市场需求与背景 移动互联网的快速发展&#xff1a; 随着移动互联网技术的不断进步&#xff0c;智能手机已成为人们日常生活中不可或缺的一部分。人们越来越多地…...

【机器学习】均方误差(MSE:Mean Squared Error)

均方误差&#xff08;Mean Squared Error, MSE&#xff09;是衡量预测值与真实值之间差异的一种方法。在统计学和机器学习中&#xff0c;MSE 是一种常见的损失函数&#xff0c;用于评估模型的预测准确性。 均方误差的定义 假设有一组真实值 ​ 和模型预测的对应值 ​。均方误…...

融合虚拟与现实,AR Engine为用户提供沉浸式交互体验

当今的应用市场中&#xff0c;传统的应用产品已经难以完全满足消费者的多样化需求。为了在竞争激烈的市场中脱颖而出&#xff0c;企业需要深入洞察用户需求&#xff0c;提供个性化的服务体验和差异化的产品创新&#xff0c;以吸引并留住消费者。 比如&#xff0c;购物类App通过…...

python | xmltodict,一个非常厉害的 关于XML数据 Python 库!

本文来源公众号“python”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;xmltodict&#xff0c;一个非常厉害的 Python 库&#xff01; 大家好&#xff0c;今天为大家分享一个非常厉害的 Python 库 - xmltodict。 Github地址&am…...

教程:FFmpeg结合GPU实现720p至4K视频转换

将一个 720p 的视频放大编码到 4K&#xff0c;这样的视频处理在很多业务场景中都会用到。很多视频社交、短视频、视频点播等应用&#xff0c;都会需要通过服务器来处理大量的视频编辑需求。 本文我们会探讨一下做这样的视频处理&#xff0c;最低的 GPU 指标应该是多少。利用开源…...

MeterSphere接口自动化-ForEach循环

接口自动化场景&#xff1a;一个接口根据不同的参数取值来运行测试&#xff0c;本场景中只有一个参数来去不同值。举例如下&#xff1a; https:://test.csdn/query?placementList1接口&#xff0c;测试id1,2,3时&#xff0c;断言接口返回的data数据都有返回。&#xff08;当然…...

ssm074应急资源管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;应急资源管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本应急资源管理系统…...

怎么对 PDF 添加权限密码或者修改密码-免费软件分享

序言 目前市面上有关PDF处理的工具有很多&#xff0c;不过绝大多数的PDF处理工具都需要付费使用&#xff0c;且很多厂商甚至连试用的机会也不给用户&#xff0c;偶有试用的&#xff0c;其试用版的条件也极为苛刻&#xff0c;比如只能处理前两页&#xff0c;或者只能处理非常小的…...

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&#xff0c;基于Transformer方法&#xff0c;用于场景中或对象级层次从稀…...

7.《双指针篇》---⑦三数之和(中等偏难)

题目传送门 方法一&#xff1a;双指针 1.新建一个顺序表用来返回结果。并排序数组。 2.for循环 i 从第一个数组元素遍历到倒数第三个数。 3.如果遍历过程中有值大于0的则break&#xff1b; 4.定义左右指针,以及target。int left i 1, right n - 1; int target -nums[i];…...

鸿蒙ArkTS中的布局容器组件(Scroll、List、Tabs)

1、Scroll组件 Scroll组件是一个可滚动的容器组件&#xff0c;用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容&#xff0c;并通过滚动机制来查看全部内容。这对于显示大量信息&#xff08;如长列表、长篇文本或大型图像等&…...

mybatis连接PGSQL中对于json和jsonb的处理

pgsql数据库表字段设置了jsonb格式&#xff1b;在java的实体里使用String或者对象转换会一直提示一个错误&#xff1a; Caused by: org.postgresql.util.PSQLException: ERROR: column "xx" is of type jsonb but expression is of type character varying 需要加一…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...