后端返回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).contentWindowsetTimeout(() => {ordonnance.print()}, 100)
},//下载文件
saveAs(blob, filename) {var link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = filename;link.click();
}

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

React:后端返回pdf数据流，前端打开页面预览，使用fetch，PDFObject
预览页面: import React, { useEffect } from 'react'; import { connect } from 'react-redux'; import PropTy ...
base64格式(pdf/word/ppt等)文件的下载与预览
后端返回base64格式的文件数据,前端根据接收的数据进行转换后实现对文件的下载和预览方法: // 附件下载这里的的data就是content数据 const downloadAttach = (i ...
后端返回PDF文件流，前端处理展示及打印
国庆突如其来的加班q.q,上午接到的需求,只能起床啦自己也是第一次接触这种业务需求,进行了一顿cv大法,网上有很多版本,个人学习借鉴(cv)了一下,在这里做个学习记录,欢迎各位指正优化,参考学习,如 ...
uniapp实现小程序预览、保存、转发pdf/word/excel等文件
用到uni.downloadFile结合uni.openDocument实现功能,无需uni.saveFile也能实现下载文件到本地以上面的word文档为例,点击调用uni.downloadFile ...
uniapp 微信小程序预览excle、pdf、word等文件（支持微信内转发）
1.代码 previewFile() {uni.showLoading({title: '加载中'})uni.downloadFile({url: "https://...../gwy.xl ...
前端处理后端返回的excel文件流并下载
项目中遇到上传excel,后端写的接口是当重复上传相同信息的excel时会吐出excel二进制文件流,这种文件流需要前端下载供用户看. 首先后端的接口需要上传文件已formData形式上传这里我用的 ...
java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
普通文件下载 + 前端获取后端返回的文件流并下载
参考资料前端接受后端文件流并下载的几种方法 ajax 请求二进制流图片文件 XMLHttpRequest 请求并处理二进制流数据之最佳实践 ajax请求二进制流进行处理(ajax异步下载文件) ...
vue 后端返回二进制流文件，前端如何实现下载？
目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流: 1.2 使用: 1.3 需要注意以下几点: 2. 关于 arraybuffer 和 blob 2.1 ArrayBuff ...

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

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

最新文章

热门文章