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

后端给的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)
    window.URL.revokeObjectURL(ifr.src) // 释放URL 对象
  })
},
doPrint(val) {
  var ordonnance = document.getElementById(val).contentWindow
  setTimeout(() => {
    ordonnance.print()
  }, 100)
},

//下载文件
saveAs(blob, filename) {
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}

猜你喜欢

转载自blog.csdn.net/q12as/article/details/128412036
今日推荐