【vue3+ts】根据后端返回内容进行pdf下载,下载后点击查看需要输入密码的问题

1、问题： 

 下载后的pdf点开是这个页面

 经过查找原因后是在发送请求下载 PDF 文件时，如果不指定响应类型为 blob，服务器返回的数据可能会被浏览器视为普通的文本数据，而不是二进制数据。这可能会导致浏览器在尝试打开 PDF 文件时出现密码输入框的情况。

通过指定 responseType 为 'blob'，您告诉 Axios 期望接收一个二进制数据的响应。这样浏览器就能正确处理这个二进制数据，而不会将其视为文本数据。

2、代码：

api.ts

//在发送请求时指定响应类型
export const exportOrder=()=>request.get(`/backstage/api/order/morder.php`,{responseType: 'blob'})

 xxx.vue

//点击导出按钮触发的方法
const exportOrders=async ()=>{
  let res=await exportOrder()
  // 创建一个可下载的链接
  const url = window.URL.createObjectURL(new Blob([res], { type: 'application/pdf' }));
  // 创建一个链接元素并模拟点击下载
  const a = document.createElement('a');
  a.href = url;
  a.download =  `order-${year.value}-${month.value}-${day.value}.pdf`; // 可以根据实际情况指定文件名
  document.body.appendChild(a);
  a.click();
  // 释放URL对象
  window.URL.revokeObjectURL(url);
  ElMessage.success('订单导出成功')
}