北京高端网站制作公司_平面设计免费网站_重庆seo整站优化_河北seo网络优化培训

场景：后端传pdf文件流，前端在页面中展示pdf 

request请求为：

//使用get请求
export async function getRequest(INSTSN, REGISTESN) {const url = '/api/getPdf?INSTSN=' + INSTSN + '&REGISTESN=' + REGISTESNconst 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界面

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，打开pdfhandlePrint(pdfUrl) {// 创建一个隐藏的 a 标签用于下载 PDFconst 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();};}// 释放之前创建的临时 URLURL.revokeObjectURL(pdfUrl);}

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

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，打开pdfhandlePrint(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();};}// 释放之前创建的临时 URLURL.revokeObjectURL(pdfUrl);}

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

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，打开pdfhandlePrint(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();//};// }// 释放之前创建的临时 URLURL.revokeObjectURL(pdfUrl);}

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