后端接口返回二进制文件,前端 window.opent预览展示

news2024/11/13 23:17:13

详细步骤

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.coloradmin.cn/o/2239731.html

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

相关文章

学习日志009--面向对象的编程

一、面向对象 面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称OOP&#xff09;是一种编程范式&#xff0c;它使用“对象”来设计应用程序和计算机程序。它利用了抽象、封装、继承和多态这些概念。 一、面向对象编程的核心概念 封装&#xff08;Encaps…

Redis8:商户查询缓存2

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…

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

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

DAY6 线程

作业1&#xff1a; 多线程实现文件拷贝&#xff0c;线程1拷贝一半&#xff0c;线程2拷贝另一半&#xff0c;主线程回收子线程资源。 代码&#xff1a; #include <myhead.h> sem_t sem1; void *copy1()//子线程1函数 拷贝前一半内容 {int fd1open("./1.txt",O…

# filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝, 失败,无法连接服务器”解决方案

filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝&#xff0c; 失败&#xff0c;无法连接服务器”解决方案 一、问题描述&#xff1a; 当我们用filezilla客户端 连接 虚拟机ubuntu系统时&#xff0c;报错“尝试连接 ECONNREFUSED - 连接被服务…

网安数学基础-同余关系

文章目录 参考等价关系实例 同余同余和等价同余的运算 乘法逆元一次同余方程消去律 剩余类中国剩余定理欧拉函数欧拉定理 费马小定理 参考 【一口气学完】密码学的数学基础2&#xff0c;《同余关系》&#xff0c;一小时学完 等价关系 三角形里的全等关系 等价关系定义 下面这…

高校数字校园建设的数字身份管理难题

近年来&#xff0c;我国高等院校在《中国教育现代化2035》战略的要求下&#xff0c;在《高等学校数字校园建设规范&#xff08;试行&#xff09;》的指引下&#xff0c;掀起了数字校园建设高潮。借助教学、科研、管理、服务等种类的业务应用&#xff0c;高校提升了业务的数字化…

HDLC和PPP原理与配置

HDLC:高级数据链路控制 PPP:点到点协议 PPP:包括LCP链路控制协议,用于各种链路协议层参数的协商内容包括最大接收单元MRU,认证方式,魔术字等选项. NCP:网络控制协议,用于各网络层参数的协商,更好地支持了网络层协议. PAP:口令认证. CHAP:质询握手认证协议 PPP有两种验证方式…

Oracle数据库 查看SQL执行计划的几种方法

前言 在日常的运维工作中&#xff0c;SQL优化是DBA的进阶技能&#xff0c;SQL优化的前提是要看SQL的执行计划是否正确&#xff0c;下面分享几种查看执行计划的方法&#xff0c;每一种方法都各有各的好处&#xff0c;可以根据特定场景选择某种方法。 一.使用AUTOTRACE查看执行…

Hbase Shell

一、启动运行HBase 首先登陆SSH&#xff0c;由于之前在Hadoop的安装和使用中已经设置了无密码登录&#xff0c;因此这里不需要密码。然后&#xff0c;切换至/usr/local/hadoop&#xff0c;启动Hadoop&#xff0c;让HDFS进入运行状态&#xff0c;从而可以为HBase存储数据&#…

31-2 智能驾驶系统

智能驾驶功能分类 安全类功能 纵向 FCW/AEB FCTA/FCTB/RCTA/RCTB RVW/RVB 横向 ESA LSS LKA/LDW/ELK 盲区安全辅助 BSD LCA DOW CVW 舒适功能类 纵向 ACC CSA TSR ISA 横向 LCC ILC ALC 横纵向 TJA/HWA NOP 泊车功能 RAP 蓝牙通信&#xff0c;环视超车波 HPA 记忆泊车…

ubuntu20.04_从零LOD-3DGS的复现

环境要求 dependencies:- cudatoolkit11.6- plyfile0.8.1- python3.7.13- pip22.3.1- pytorch1.12.1- torchaudio0.12.1- torchvision0.13.1- tqdm1. 安装conda创建环境 conda create -n lod-3dgs python3.7.132. 安装CUDA11.6和相应cuDNN。 2.1 CUDA CUDA安装参考CUDA10.1…

Linux:网络协议socket

我们之前学的通信是本地进程间通信&#xff0c;如果我们想在网络间通信的话&#xff0c;就需要用到二者的ip地址&#xff0c;分别被称为源IP地址和目的IP地址&#xff0c;被存入ip数据包中&#xff0c;其次我们还需要遵循一些通信协议。 TCP协议&#xff1a;传输层协议&#x…

Leetcode - 143双周赛

目录 一&#xff0c;3345. 最小可整除数位乘积 I 二&#xff0c;3346. 执行操作后元素的最高频率 I 1.差分数组 2.同向三指针 滑动窗口 三&#xff0c; 3348. 最小可整除数位乘积 II 一&#xff0c;3345. 最小可整除数位乘积 I 本题直接暴力枚举&#xff0c;题目求 >n…

Springboot3 配置Swargger3.0版本

一、swagger 版本配置&#xff0c;我用的3.0.0 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>${swagger.version}</version></dependency>二、说明&#xff1a;springdo…

error MSB3325:无法导入以下密钥文件xxx,该密钥文件可能受密码保护

错误提示信息(类似如下)&#xff1a; error MSB3325: 无法导入以下密钥文件: F:\...\Common.pfx。该密钥文件可能受密码保护。若要更正此问题&#xff0c;请尝试再次导入证书&#xff0c;或手动将证书安装到具有以下密钥容器名称的强名称 CSP: VS_KEY_A65F207BE95F57D0 出现此…

喜报|超维机器人荣获昇腾AI创新大赛铜奖

近日&#xff0c;在备受瞩目的昇腾AI创新大赛中&#xff0c;超维机器人凭借扎实的技术实力和创新产品&#xff0c;荣获大赛铜奖。这一荣誉不仅展现了超维机器人在智能巡检领域的技术创新与突破&#xff0c;也标志着超维机器人的智能巡检解决方案在人工智能领域获得了广泛认可&a…

[[nodiscard]] 使用说明

1 作用 [[nodiscard]] 属性&#xff1a;这个属性可以用于函数或者返回类型。它的作用是告诉编译器&#xff1a;调用这个函数时&#xff0c;它的返回值不应被忽略。如果程序员调用了这样的函数但没有使用它的返回值&#xff0c;编译器会发出警告。这对于那些返回重要状态或错误…

golang分布式缓存项目 Day4 一致性哈希

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习 为什么使用一致性哈希 我该访问谁 对于分布式缓存来说&#xff0c;当一个节点接收到请求&#xff0c;如…

MySQL数据库专栏(四)MySQL数据库链接操作C#篇

摘要 本篇文章主要介绍C#链接MySQL数据库的接口介绍&#xff0c;使用实例及注意事项&#xff0c;辅助类的封装及调用实例&#xff0c;可以直接移植到项目里面使用。 目录 1、添加引用 2、接口介绍 2.1、MySqlConnection 2.2、MySqlCommand 2.3、MySqlDataReader…