后端接口返回二进制文件,前端 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');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/60267.shtml

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

相关文章

EMC Plus:外壳中的 PCB 演示

EMC Plus 提供了计算任何导入的近场源文件的字段统计信息的高级功能。在本演示中&#xff0c;我将指导您完成分析辐射电场的分步工作流程&#xff0c;特别是由 EMC Plus 中从 SIwave 导入的近场源产生的辐射电场。让我们开始吧&#xff01; 概述 以下模型是计算机机箱&#x…

【免越狱】iOS砸壳 可下载AppStore任意版本 旧版本IPA下载

软件介绍 下载iOS旧版应用&#xff0c;简化繁琐的抓包流程。 一键生成去更新IPA&#xff08;手机安装后&#xff0c;去除App Store的更新检测&#xff09;。 软件界面 支持系统 Windows 10/Windows 8/Windows 7&#xff08;由于使用了Fiddler库&#xff0c;因此需要.Net环境…

SpringBoot沙箱环境支付宝支付

1、创建应用 登录支付宝开放平台 支付宝开放平台网址 &#xff1a;支付宝 (alipay.com) 支付宝开放平台 下拉最下边 2、获取appId、支付宝公钥、应用私钥 3、开始创建spring boot项目 #支付宝支付配置 alipay:#你的APPIDappId: 902************#你的应用私钥privateKey: MIIE…

计算机图形学 实验二 三维模型读取与控制

目录 一、实验内容 二、具体内容 (在实验2.3的基础上进行修改) 1、OFF格式三维模型文件的读取 2、三维模型的旋转动画 3、键盘鼠标的交互 4、模型的修改 三、代码 一、实验内容 读取实验提供的off格式三维模型&#xff0c;并对其赋色。利用鼠标和键盘的交互&#xff0…

FastGPT部署通义千问Qwen和智谱glm模型|OneAPI配置免费的第三方API

继这篇博客之后 从零开始FastGPT本地部署|Windows 有同学问&#xff0c;不想在多个平台申请API-Key&#xff0c;不好管理且要付费&#xff0c;有木有白嫖方案呀&#xff1f; 答&#xff1a;有啊。用硅基流动。 注册方法看这篇 【1024送福利】硅基流动送2000万token啦&#xff0…

SSE (Server-Sent Events) 服务器实时推送详解

Server-Sent Events 一、什么是 SSE ?二、SSE 的工作原理三、SSE 的基本配置1.HTTP 请求和响应头设置2.SSE 字段介绍3.SSE 事件数据流示例 四、SseEmitter 的基本配置1.SseEmitter 介绍及用法2.使用 SseEmitter 示例11)编写核心 SSE Client2)编写 Controller3)前端接收与处理 …

UE4/5 编译报错 MSB3073

UE4/5 编译报错 MSB3073 目录 UE4/5 编译报错 MSB3073 一、引言 二、方法1 三、方法2 四、方法3 一、引言 我们下载源代码之后编译时&#xff0c;可能会出现以下报错&#xff1a; MSB3073 命令“..\..\Build\BatchFiles\Rebuild.bat -Target"UE4Editor Win64 Devel…

Python学习从0到1 day28 Python 高阶技巧 ⑤ 多线程

若事与愿违&#xff0c;请相信&#xff0c;上天自有安排&#xff0c;允许一切如其所是 —— 24.11.12 一、进程、线程 现代操作系统比如Mac OS X&#xff0c;UNIX&#xff0c;Linux&#xff0c;Windows等&#xff0c;都是支持“多任务”的操作系统。 进程 进程&#xff1a;就…

扫雷游戏代码分享(c基础)

hi , I am 36. 代码来之不易&#x1f44d;&#x1f44d;&#x1f44d; 创建两个.c 一个.h 1&#xff1a;test.c #include"game.h"void game() {//创建数组char mine[ROWS][COLS] { 0 };char show[ROWS][COLS] { 0 };char temp[ROWS][COLS] { 0 };//初始化数…

智慧社区可视化解决方案:科技引领社区服务与管理新篇章

随着社会的发展&#xff0c;智慧社区作为新型城镇化发展目标和社区服务体系建设的重要举措&#xff0c;正逐步改变着我们的生活方式。智慧社区通过综合运用现代科学技术&#xff0c;整合区域资源&#xff0c;提升社区治理和服务水平&#xff0c;为居民提供更为便捷、高效、安全…

在 WPF 中,如何实现数据的双向绑定?

在 WPF 中&#xff0c;数据绑定是一个非常重要的特性&#xff0c;它允许 UI 与数据源之间自动同步。双向绑定是一种常见的绑定方式&#xff0c;当数据源更新时&#xff0c;UI 会自动更新&#xff1b;同样&#xff0c;当 UI 中的元素&#xff08;如文本框&#xff09;发生改变时…

[Docker#4] 镜像仓库 | 部分常用命令

目录 什么是 Docker Registry 镜像仓库生活案例 镜像仓库分类 镜像仓库工作机制 常用的镜像仓库 私有仓库 镜像仓库命令 镜像命令[部分] 容器命令[部分] 什么是 Docker Registry 定义&#xff1a;Docker Registry 负责存储、管理和分发镜像&#xff0c;并提供了登录认…

嵌入式学习-网络高级-Day03

嵌入式学习-网络高级-Day03 基于webserver的工业数据采集 HTTP协议 http简介 http特点 http协议格式 客户端请求数据格式 请求行&#xff1a; 请求头部 空行&#xff1a; 请求体 服务器响应数据格式 webserver源码分析 postman的使用 整体流程分析 任务 html html简介 html标签…

2024年Python最新下载安装教程,附详细图文,持续更新

大家好&#xff0c;我是Java徐师兄&#xff0c;今天为大家带来的是Python3 的下载安装教程&#xff0c;适用于所有 Python3 版本&#xff0c;感兴趣的可以看一下 文章目录 简介一、Python的下载1 网盘下载地址 (下载速度比较快&#xff0c;推荐&#xff09;2 官网下载地址 二、…

原生鸿蒙应用市场:赋能开发者全生命周期服务体验

文章目录 背景自动化检测前移&#xff1a;早发现&#xff0c;早解决技术细节&#xff1a;静态代码分析与兼容性测试应用场景 按需加载&#xff1a;优化性能&#xff0c;提升用户体验技术细节&#xff1a;模块化与懒加载实现应用场景 应用加密&#xff1a;保护应用代码安全&…

kafka面试题解答(四)

5、消费者组和分区数之间的关系是怎样的&#xff1f; 消费者组数小于等于分区数&#xff0c;消费者组内每个消费者负责消费不同分区的数据&#xff0c;一个分区只能由一个组内消费者消费。 6、kafka如何知道哪个消费者消费哪个分区&#xff1f; 生产者把数据发送给各个分区&…

鸿蒙华为商城APP案例

模拟器运行效果如下&#xff1a; 鸿蒙版APP-华为商城-演示视频

C++【STL容器系列(二)】vector的模拟实现

文章目录 1. vector的结构2. vector的默认成员函数2.1构造函数2.1.1 默认构造2.1.2 迭代器构造2.1.3 用n个val初始化构造 2.2 拷贝构造2.3 析构函数2.4 operator 3. vector iterator函数3.1 begin 和 cbegin函数3.2 end() 和 cend()函数 4. vector的小函数4.1 size函数4.2 capa…

Linux开发讲课49--- Linux 启动过程分析

理解运转良好的系统对于处理不可避免的故障是最好的准备。 启动过程非常简单。内核在单核上以单线程和同步状态启动&#xff0c;似乎可以理解。但内核本身是如何启动的呢&#xff1f;initrd&#xff08;initial ramdisk&#xff09; 和引导程序(bootloader)具有哪些功能&#…

vscode中执行git合并操作需要输入合并commit信息,打开的nano小型文本编辑器说明-

1.前提: VScode中的git组件执行任何合并动作的时候需要提交远程合并的commit信息,然后编辑器自动打开的是nano文本编辑器 2.nano编辑器说明: 1.保存文件:按 Ctrl + O,然后按 Enter 来保存文件。 2.退出编辑器:按 Ctrl + X,这会退出 nano。 3.剪切文本:移动光标到要剪…