当前位置: 首页 > news >正文

导出文件到指定路径??

需求:点击导出pdf按钮,弹出系统文件夹弹框,可以选择保存文件的位置。

经查询window.showSaveFilePicker可实现,但这个api处于实验阶段,且用下来确实和浏览器类型、浏览器版本、以及本身api就不稳定有关系。

代码见下:

<el-button @click="handleExportPdf">导出pdf</el-button>api.js接口文件:
// 获取PDF流
export function getHistoryCheckPdf(params) {return request({method: "post",url: `${baseUrlReportApp}docReport/gainReportPdf`,responseType: "arraybuffer",//指定响应流的类型data: params});
}
// node上传PDF文件流打印接口
export function nodePrintFile(data) {return request({baseURL: 'http://localhost:3080/printPdf', // 直接通过覆盖的方式data,method: 'post'})
}<script>
import { getHistoryCheckPdf,nodePrintFile } from "@/api";
export default {methods:{handleExportPdf(){this.fetchPDF();},async fetchPDF(isCloseReport) {getHistoryCheckPdf({stReportSoid: this.initializeInfo.stReportSoid,requestSoid: createListRequestSoid(this.initializeInfo)[0],}).then((res) => {if (res.byteLength < 10) {this.$message({message: "PDF未获取到,请稍后重试!",type: "warning",});return;}// 保存pdf到本地文件夹this.savePDF(res);// 打印pdf方法// this.handlerNodeResPrint(res, isCloseReport);});}}
},// 保存文件到指定位置async savePDF(res) {let curTime = moment().format("YYYY-MM-DD HH:mm:ss");let timeList = curTime.split(" ");let dateItem = timeList[0].split("-").join("");let timeItem = timeList[1].split(":").join("");let finaDate = dateItem + timeItem;let pdfName = finaDate + ".pdf";// ①保存文件到默认位置var blob = new Blob([res], { type: "application/octet-stream" });var url = window.URL.createObjectURL(blob);var link = document.createElement("a");link.href = url;link.download = pdfName;document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(url);// ②保存文件到指定位置:不稳定,未使用// window.showSaveFilePicker此api尚在实验中,只支持https,且对浏览器有兼容// try {//   const opts = {//     types: [//       {//         description: "文件",//         accept: {//           "text/plain": [".txt"],//           "application/pdf": [".pdf"],//           "image/jpeg": [".jpg", ".jpeg"],//           "image/png": [".png"],//         },//       },//     ],//     excludeAcceptAllOption: true,//     suggestedName: pdfName,//   };//   const handle = await window.showSaveFilePicker(opts); // 打开保存文件对话框//   const writable = await handle.createWritable(); // 创建可写入的文件对象//   // 在这里写入文件内容//   await writable.write(res);//   await writable.close();//   console.log("文件保存成功");//   this.$message.success("文件保存成功");// } catch (error) {//   console.error("文件保存失败:", error);// }},//打印方法handlerNodeResPrint(buffer, isCloseReport) {const formData = new FormData();formData.append("file", new Blob([buffer]));// formData.append("printName", "");formData.append("fileType", "pdf");formData.append("type", "server");formData.append("orientation", "landscape");formData.append("paperSize", "A5");// Node打印nodePrintFile(formData).then((res) => {if (res.code == 200) {this.$message.success("打印成功!!!");} else {this.$message.error(res.message);}});},},</script>
http://www.lryc.cn/news/241294.html

相关文章:

  • 腾讯微服务平台TSF学习笔记(二)--如何使用spring cloud zuul实现线上流量复制
  • React自定义Hook之useRequest
  • 【LeetCode】挑战100天 Day13(热题+面试经典150题)
  • Android 11.0 SystemUI 去掉状态栏wifi流量上下行图标功能实现
  • 掌握Net User命令:轻松创建、修改、删除和查看本地用户帐户
  • 性能优化中使用Profiler进行页面卡顿的排查及解决方式
  • 深入了解Java8新特性-日期时间API_LocalDate类
  • PyTorch基本操作和工作流程
  • Android开发从0开始(ContentProvider与数据)
  • STM32_6(TIM)
  • Linux中flask项目开启https访问
  • Kubernetes 离线部署 Spinnaker
  • TypeScript 学习笔记 第三部分 贪吃蛇游戏
  • 【spring(一)】核心容器总结
  • 易点易动固定资产管理系统:实现全面的固定资产采购管理
  • 力扣:178. 分数排名(Python3)
  • raid磁盘阵列
  • SpringBoot学习笔记-实现微服务:匹配系统(上)
  • 重磅!全球首个“绿色黑灯工厂”落户中国,竟然是这家企业……
  • go语言学习-异常处理
  • 如何使用 JavaScript 实现图片上传并转换为 LaTeX 公式
  • 深刻理解MySQL8游标处理中not found
  • 甄知燕千云与SAP、EBS、TC、NS等应用深度集成,智能提单一键畅通,效能一键提升
  • 第99步 深度学习图像目标检测:SSDlite建模
  • 用EasyAVFilter将网络文件或者本地文件推送RTMP出去的时候发现CPU占用好高,用的也是vcodec copy呀,什么原因?
  • Vatee万腾科技的独特力量:Vatee数字时代创新的新视野
  • 【JavaSE】基础笔记 - 异常(Exception)
  • QTableWidget——编辑单元格
  • 编译QT Mysql库并集成使用
  • 利用企业被执行人信息查询API保障商业交易安全