JS文件预览

飞飞侯

已于 2022-06-24 16:58:05 修改

阅读量3.5k

点赞数

分类专栏： project 文章标签： javascript 前端 vue.js

于 2022-05-07 14:21:40 首次发布

本文链接：https://blog.csdn.net/pia_ji/article/details/124629404

版权

project 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何在后端返回url链接或二进制流的情况下，预览图片和PDF文件。涉及直接src赋值、base64编码、iframe使用和二进制流处理的详细步骤，包括图片的blob和pdf的arraybuffer格式。

摘要由CSDN通过智能技术生成

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

1.图片

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

2.pdf

// 将url赋值给iframe标签src属性即可
<iframe src="" frameborder="0" width="100%" height="100%"></iframe>

二.后端返回二进制流

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

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

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

// res为后端返回二进制流，创建链接
const src = window.URL.createObjectURL(new Blob([res],{type: 'application/pdf' }))
// 然后将src赋值给iframe标签src属性即可 注意需添加type属性
<iframe src="" frameborder="0" width="100%" height="100%" type="application/x-google-chrome-pdf"></iframe>

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属性即可
<iframe src="" frameborder="0" width="100%" height="100%"></iframe>

其余文件类型待补充