【js】记录预览pdf文件

接口调用拿到pdf的文件流,用blob处理这个文件流拿到url,使用window.open跳转新的窗口进行预览

javascript 复制代码
api({
	dataType: 'blob',
}).then(res =>{
	if(res.code === 0){
	   this.previewPDF(
	     res,
	     'application/pdf;charset=utf-8',
	     'pdf文件名'
	   )
	 }
})

previewPDF (res, type, fname) {
    try {
      if(!res|| !res.data || !res.headers) {
        throw new Error("Invalid response")
      }
      const fileType = res.headers['content-type'] || type
      console.log(res.headers['content-type'])  
      const blob = new Blob([res.data], {type: fileType})
      console.log(blob)  
      const urlObject = URL.createObjectURL(blob)
      console.log(urlObject ) 
      window.open(urlObject, '_blank');
    }catch(err) {
      throw new Error("预览失败")
    }
}

接口返回的数据

打印res.headers['content-type']

响应头

请求头

打印blob

打印urlObject

文件预览

相关推荐
智购科技无人售货机工厂店3 小时前
玻璃瓶饮料破损率突然上升,排查发现是取货口缓冲垫老化了~YH
java·开发语言·人工智能·python·eclipse
枫叶丹43 小时前
语音 AI 怎样边听边答:实时对话系统的工作原理
开发语言·人工智能·chatgpt·开源·php·agent·codex
xie0510_3 小时前
Any类简要实现
开发语言·c++·算法
小狼Solar3 小时前
SAP MDG 功能范围说明(基于S/4HANA 2025)
java·开发语言
kimnoic3 小时前
Python常用标准库模块及查询使用方法
开发语言·python
知识分享小能手4 小时前
C学习教程,从入门到精通,C语言输入和输出(4)
c语言·开发语言·学习
道尔柯南4 小时前
C++ 入门基础详解:从第一个程序到核心语法特性
开发语言·c++
盛世宏博智慧档案4 小时前
Modbus TCP+PoE以太网温湿度传感器项目部署全流程,附网络调试实操
开发语言·tcp/ip·php·以太网·传感器·温湿度
ACP广源盛139246256734 小时前
Type-C 扩展坞方案选型笔记|国产 DP1.2 转 HDMI2.0 桥接芯片 GSV2201D@ACP 评估
开发语言·笔记·硬件架构·硬件工程·hdmi·国产芯片
yuniko-n4 小时前
【JUC】线程间通信
java·开发语言