相关文章推荐

通过Blob流在浏览器中打开pdf文件

  const url = `/eehds/epidemic/print?taskId=${this.taskId}&isPrint=true`
  axios({
    method: 'get',
    url: url,
    headers: {},
    responseType: 'blob',
  }).then(response => {
    let blob = new Blob([response.data], { type: 'application/pdf;charset=utf-8' })
    let href = window.URL.createObjectURL(blob) //创建下载的链接
    window.open(href)
				
前端下载文件是个很通用的需求,一般后端会提供下载的方式有两种:1.直接返回文件的网络地址(一般用在静态文件上,比如图片以及各种音视频资源等)2.返回文件流(一般用在动态文件上,比如根据前端选择,导出不同的统计结果 excel 等)第一种方式比较简单,但是使用场景有限。第二种方式通用性更好。 blob转file
URL.createObjectURL() 静态方法会创建一个 DOMString,其包含一个表示参数给出的对象的URL。这个 URL 的生命周期和创建它的窗口的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。 下面的示例是
```html <object data="data:application/pdf;base64,PDF文件流数据" type="application/pdf" width="100%" height="600px"> <p>您的浏览器不支持查看PDF文件,请下载<a href="data:application/pdf;base64,PDF文件流数据" download>PDF文件</a>查看。</p> </object> 其,`data` 属性值为 PDF 文件的 base64 编码数据,`type` 属性值为 `application/pdf`,`width` 和 `height` 可以设置显示的宽度和高度。 2. 使用 JavaScript 打开 PDF 文件流: ```javascript var fileData = 'PDF文件流数据'; var blob = new Blob([fileData], { type: 'application/pdf' }); var url = URL.createObjectURL(blob); window.open(url); 其,`Blob` 对象用于创建一个二进制对象,`URL.createObjectURL` 方法用于生成一个 URL,`window.open` 方法用于打开新窗口并显示 PDF 文件。 注意:以上两种方法都需要保证浏览器支持 PDF 文件的查看。如果浏览器不支持,则需要提供下载链接供用户下载查看。
 
推荐文章