前端处理pdf文件流,展示pdf

**场景:**后端传pdf文件流,前端在页面中展示pdf

request请求为:

javascript 复制代码
//使用get请求
export async function getRequest(INSTSN, REGISTESN) {
  const url = '/api/getPdf?INSTSN=' + INSTSN + '&REGISTESN=' + REGISTESN
  const method = 'get'
  const headers = { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
  const responseType = 'arraybuffer'
  const response = await service.request({
    url,
    method,
    headers,
    responseType,
  })
  return response;
}

调用请求,处理返回的数据显示pdf

自动下载pdf,打开打印界面,跳转到pdf界面

javascript 复制代码
async getReport() {
        //得到需要的参数
      const INSTSN = INSTSN;
      const REGISTESN = REGISTESN;
      try {
        //通过get请求,从后端返回得到pdf的数据
        const response = await getReport(INSTSN, REGISTESN);
        const binaryData = [response];
        const blob = new Blob(binaryData, { type: 'application/pdf' });
        const pdfUrl = URL.createObjectURL(blob);
        if (pdfUrl) {
          this.handlePrint(pdfUrl);
        }
      } catch (error) {
        console.error('加载 PDF 失败:', error);
        alert('无法打开 PDF,请检查控制台!');
      }
    },
    //处理生成的url,打开pdf
    handlePrint(pdfUrl) {
       // 创建一个隐藏的 a 标签用于下载 PDF
       const a = document.createElement('a');
       a.href = pdfUrl;
       a.download = 'report.pdf';
       a.style.display = 'none';
       document.body.appendChild(a);
      // // 触发下载
       a.click();
       // 移除 a 标签
       document.body.removeChild(a);
      // 打开 PDF 并直接调用打印功能
      const newWindow = window.open(pdfUrl);
       if (newWindow) {
         newWindow.onload = function () {
           newWindow.print();
         };
       }
      // 释放之前创建的临时 URL
      URL.revokeObjectURL(pdfUrl);
    }

打开打印界面,转到pdf界面,不会自动下载

javascript 复制代码
async getReport() {
        //得到需要的参数
      const INSTSN = INSTSN;
      const REGISTESN = REGISTESN;
      try {
        //通过get请求,从后端返回得到pdf的数据
        const response = await getReport(INSTSN, REGISTESN);
        const binaryData = [response];
        const blob = new Blob(binaryData, { type: 'application/pdf' });
        const pdfUrl = URL.createObjectURL(blob);
        if (pdfUrl) {
          this.handlePrint(pdfUrl);
        }
      } catch (error) {
        console.error('加载 PDF 失败:', error);
        alert('无法打开 PDF,请检查控制台!');
      }
    },
    //处理生成的url,打开pdf
    handlePrint(pdfUrl) {
       // 创建一个隐藏的 a 标签用于下载 PDF
       //const a = document.createElement('a');
       //a.href = pdfUrl;
       //a.download = 'report.pdf';
       //a.style.display = 'none';
       //document.body.appendChild(a);
      // // 触发下载
       //a.click();
       // 移除 a 标签
       //document.body.removeChild(a);
      // 打开 PDF 并直接调用打印功能
      const newWindow = window.open(pdfUrl);
       if (newWindow) {
         newWindow.onload = function () {
           newWindow.print();
         };
       }
      // 释放之前创建的临时 URL
      URL.revokeObjectURL(pdfUrl);
    }

转到pdf页面,不会自动下载,不会跳出打印窗口

javascript 复制代码
async getReport() {
        //得到需要的参数
      const INSTSN = INSTSN;
      const REGISTESN = REGISTESN;
      try {
        //通过get请求,从后端返回得到pdf的数据
        const response = await getReport(INSTSN, REGISTESN);
        const binaryData = [response];
        const blob = new Blob(binaryData, { type: 'application/pdf' });
        const pdfUrl = URL.createObjectURL(blob);
        if (pdfUrl) {
          this.handlePrint(pdfUrl);
        }
      } catch (error) {
        console.error('加载 PDF 失败:', error);
        alert('无法打开 PDF,请检查控制台!');
      }
    },
    //处理生成的url,打开pdf
    handlePrint(pdfUrl) {
       // 创建一个隐藏的 a 标签用于下载 PDF
       //const a = document.createElement('a');
       //a.href = pdfUrl;
       //a.download = 'report.pdf';
       //a.style.display = 'none';
       //document.body.appendChild(a);
      // // 触发下载
       //a.click();
       // 移除 a 标签
       //document.body.removeChild(a);
      // 打开 PDF 并直接调用打印功能
      const newWindow = window.open(pdfUrl);
       //if (newWindow) {
         //newWindow.onload = function () {
           //newWindow.print();
         //};
      // }
      // 释放之前创建的临时 URL
      URL.revokeObjectURL(pdfUrl);
    }

原文链接:vue接收后端传来的pdf文件流,前端调用预览PDF_vue如何显示fastreport-CSDN博客

相关推荐
三思而后行,慎承诺几秒前
npm、pnpm 和 yarn 包管理工具
前端·npm·node.js
wuhen_n21 分钟前
CSS元素动画篇:基于当前位置的变换动画(三)
前端·css·html·css3·html5
brzhang23 分钟前
告别面条代码!用可视化编程 Flyde 给你的 Node.js/Web 应用逻辑解解耦
前端·后端·架构
brzhang41 分钟前
还在手撸线程?搞懂这 6 大多线程设计模式,并发编程不再难!
前端·后端·架构
拖孩1 小时前
【Nova UI】十四、打造组件库之按钮组件(下):按钮组组件的构建之旅
前端·javascript·vue.js
pixle01 小时前
Vue3 Echarts 3D圆形柱状图实现教程以及封装一个可复用的组件
前端·3d·vue·echarts
Rudon滨海渔村1 小时前
[随笔] 升级uniapp旧项目的vue、pinia、vite、dcloudio依赖包等
前端·vue.js·uni-app
Watermelo6172 小时前
Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush.
前端·javascript·vue.js·elementui·html·es6·bug
低代码布道师2 小时前
第一部分:网页的骨架 —— HTML
前端·html
PyAIGCMaster2 小时前
穷鬼计划:react+tailwindcss+vercel
前端·react.js·前端框架