【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

文件预览

相关推荐
技术小甜甜13 分钟前
【Cursor】Skill 被标黄色警告,怎么改成合格的 SKILL.md
开发语言·javascript·ai编程·cursor·1024程序员节·ai agent·skills
小小龙学IT1 小时前
Python Polars 高性能数据处理引擎深度解析
开发语言·python·rust·1024程序员节
quantdash_cc1 小时前
如何利用标的信息为研究股票池补充名称和交易所信息?
开发语言·python·pandas·量化交易·1024程序员节·股票数据·quantdash
qetfw1 小时前
Bash 函数与流程控制:read、if、for、case 验证
linux·前端·javascript·bash
CRMEB系统商城2 小时前
家电零售的供应商协同与物流提效
java·开发语言·人工智能·小程序·1024程序员节
鬼手点金2 小时前
从 API 消息到模型 Token:Chat Template
java·前端·javascript·数据库·人工智能·深度学习·1024程序员节
王大师王文峰2 小时前
Java+AI 面试题(二):业务场景设计 10 例【客服机器人、合同审查、Text2SQL、告警降噪、成本优化】场景题答法与追问链路
java·开发语言·人工智能
言乐62 小时前
Python实现三轴联动根据数据自动打磨镜片模型
开发语言·python
CHHH_HHH3 小时前
【Linux网络篇】初识网络与Socket编程基础
linux·服务器·c语言·开发语言·网络·后端·1024程序员节
jimy13 小时前
C++ 中 xvalue 的 identity 存在哪里?和 lvalue 的 identity 有什么区别?
开发语言·c++·1024程序员节