【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

文件预览

相关推荐
张元清11 分钟前
使用 Hooks 构建无障碍 React 组件
前端·javascript·面试
Yupureki22 分钟前
《Linux系统编程》12.基础IO
linux·运维·c语言·开发语言·数据库·c++
淮北49422 分钟前
bash下好用的快捷键以及linux常用指令
linux·开发语言·ubuntu·bash
薛定谔的猫喵喵40 分钟前
卸载 Python 3.8 报错 “Could not set file security” 的终极解决方案
开发语言·python
Mahut1 小时前
从零构建神经影像可视化库:neuroviz 的架构设计与实现
前端·javascript·github
奇怪的猫1 小时前
浏览器窗口最小化的时候,setInterval 执行变慢,解决方案
前端·javascript
看山是山_Lau1 小时前
代码命名规范原则与原理
c语言·开发语言
cmd1 小时前
别再混淆了!JS类型转换底层:valueOf vs toString vs Symbol.toPrimitive 详解
前端·javascript
_MyFavorite_1 小时前
JAVA重点基础、进阶知识及易错点总结(8)List 接口(ArrayList、LinkedList、Vector)
java·开发语言·list