JS文件预览

一.后端返回url链接直接预览

1.图片

// 将url赋值给img标签src属性即可
 加载失败
// base64编码 url = `data:image/png;base64,${base64编码}`
 加载失败

2.pdf

// 将url赋值给iframe标签src属性即可

二.后端返回二进制流

1.图片
注意:请求需添加contenType:‘blob’

// res为后端返回二进制流,创建链接
const src = window.URL.createObjectURL(new Blob([res],{type: 'application/octet-stream' }))
// 然后将src赋值给img标签src属性即可
加载失败

2.pdf
注意:请求需添加contenType:‘arraybuffer’
a. 不使用插件(推荐,简单明了,不需下载插件)

// res为后端返回二进制流,创建链接
const src = window.URL.createObjectURL(new Blob([res],{type: 'application/pdf' }))
// 然后将src赋值给iframe标签src属性即可 注意需添加type属性

b. 通过插件jspdf

npm i jspdf

将pdf文件夹赋值粘贴至public目录下

// res为后端返回二进制流,创建链接
const url = window.URL.createObjectURL(new Blob([res],{type: 'application/pdf' }))
src = `./pdf/web/viewer.html?file=${url}`
// 然后将src赋值给iframe标签src属性即可

其余文件类型待补充

你可能感兴趣的:(project,javascript,前端,vue.js)