美文网首页
前端根据后台返回的文件流实现在线预览/打印

前端根据后台返回的文件流实现在线预览/打印

作者: 汶沐 | 来源:发表于2022-11-15 17:07 被阅读0次

在线预览

1.请求接口 请求设置responseType

axios.get(url,{resonseType：'blob'})

2.根据返回的值创建一个Blob对象,

// 以pdf文件为例
let blob = new Blob([result],{
       type: "application/pdf;chartset=UTF-8"
})

3.window.URL.createObjectURL创建一个url连接

let blob = new Blob([result],{
       type: "application/pdf;chartset=UTF-8"
})
let url = window.URL.createObjectURL(blob)

4.在线预览
可以用iframe预览，url的值为 window.URL.createObjectURL(blob),
或者直接打开window.open(url)

打印

1.创建iframe标签

const iframe = document.createElement('iframe')

2.属性相关

iframe.className = 'tmp-pdf';
iframe.style.display = 'none'
// blobUrl 像在线预览1,2,3这样得来的url
iframe.src = blobUrl

3.创建好的iframe添加到页面body

document.body.appendChild(iframe)

4.执行打印方法，并移除iframe

setTimeout(function() {
   iframe.contentWindow.print()
   document.body.removechild(iframe)
}, 100)

相关文章

  • 前端根据后台返回的文件流实现在线预览/打印

    在线预览 1.请求接口 请求设置responseType 2.根据返回的值创建一个Blob对象, 3.window...

  • 后台返回文件流，前端实现预览pdf

    PDFJS:https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端，生成blo...

  • blob与base64转换

    在处理文件预览与打印的时候经常需要转换成base64在前端处理，后台返回blob对象。 blob转换为base64...

  • 02vue+axios+form实现文件下载（附Java实现代码

    参考文章 form实现文件下载 1.0前端实现思路 用一个from接收后台返回的文件流。form用display为...

  • vue 下载pdf文件

    需求：后台返回PDF文件流，前端实现下载到本地 1.封装请求 responseType: 'arraybuffer...

  • 前端下载文件而不是打开预览（支持 doc / excel / p

    前端根据后台返回的文件地址（非跨域），实现点击下载文件 a 标签下载文件，download属性可以实现对下载文件的...

  • 前端实现在线预览pdf、word、xls、ppt等文件

    1、前端实现pdf文件在线预览功能 方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览...

  • 前端预览PDF，Excel，Word，TXT文件

    前端可以使用iframe可以直接预览文件，以下是几种依靠iframe实现在线预览的解决方案。