后端返回PDF文件地址，直接打印出文件以及下载

前端实现PDF打印与下载

原创

已于 2022-12-23 11:07:00 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#pdf

于 2022-12-22 18:19:32 首次发布

该博客介绍了一种前端处理PDF的方法，通过将后端提供的PDF文件地址转换为blob，创建隐藏iframe并设置其src属性为PDF地址，从而实现PDF的打印。同时，通过设置下载函数，可以将PDF文件以指定名称进行下载。整个过程涉及到了前端的Blob对象、XMLHttpRequest、iframe以及打印和下载功能的实现。

后端给的PDF文件地址，直接将pdf打印出来或者下载

将后端地址转换为blob文件，然后创建一个隐藏的iframe标签src设置为pdf地址；前端通过获取隐藏的iframe标签的id来实现打印指定内容


/**
* 封装请求，将后端地址转blob文件
* src 后端pdf文件地址
*/
Blob(src){
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', src, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };
    xhr.send();
  })
},
PrintBtnClick(){
  // 调用
  this.Blob('pdf文件地址').then(res=>{
    console.log(res)
    this.saveAs(res,'下载文件名称')
    var date = (new Date()).getTime()
    var ifr = document.createElement('iframe')
    ifr.style.frameborder = 'no'
    ifr.style.display = 'none'
    ifr.style.pageBreakBefore = 'always'
    ifr.setAttribute('id', 'printPdf' + date)
    ifr.setAttribute('name', 'printPdf' + date)
    ifr.src = window.URL.createObjectURL(res)
    document.body.appendChild(ifr)
    this.doPrint('printPdf' + date)
    wi

最低0.47元/天解锁文章