导出文件到指定路径??

需求:点击导出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.mzph.cn/news/166086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python,FastAPI,mLB网关,无法访问/docs

根源就是js和ccs文件访问路由的问题&#xff0c;首先你要有本地的文件&#xff0c;详情看https://qq742971636.blog.csdn.net/article/details/134587010。 其次&#xff0c;你需要这么写&#xff1a; /unicontorlblip就是我配置的mLB网关路由。 app FastAPI(titleoutpaint…

【力扣:421,2935】数组内最大异或对问题

思路&#xff1a;从最高位向低位构造&#xff0c;对每一位利用哈希表寻找是否存在可使此位为1的数 第一轮找1&#xff1a;清空哈希表&#xff0c;1&#xff0c;2存1&#xff0c;到3发现1^01&#xff0c;res|1<<3 第二轮找11&#xff1a;清空哈希表&#xff0c;1存10&…

如何开发洗鞋店用的小程序

随着人们生活水平的提高&#xff0c;洗护行业是越来越细分化了&#xff0c;从最开始的干洗店包含洗护行业的所有服务到现在有专门为洗鞋开的店&#xff0c;如果开发一款洗鞋店用的小程序&#xff0c;可以实现用户在家下单直接有人上门取鞋的话&#xff0c;应该如何去开发呢&…

将 Spring 微服务与 BI 工具集成:最佳实践

软件开发领域是一个不断发展的领域&#xff0c;新的范式和技术不断涌现。其中&#xff0c;微服务架构和商业智能&#xff08;BI&#xff09;工具的采用是两项关键进步。随着 Spring Boot 和 Spring Cloud 在构建强大的微服务方面的普及&#xff0c;了解这些微服务如何与 BI 工具…

11-@Transaction与AOP冲突解决

如题&#xff0c;最近碰到了一个问题&#xff0c;在public方法上添加Transaction没有生效&#xff0c;事务没有回滚。 我自己模拟了一个功能&#xff0c;向数据库表User里面插入用户数据。说一下代码背景&#xff0c; 数据库MySQL&#xff0c;持久化层Mybatis&#xff0c;项目使…

Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用

最近在项目中用到上传裁剪&#xff0c;看了一下代码&#xff0c;觉得这插件可可以。梳理了一下代码分享给大家 前端UI组件element-plus 如果你也用到了 &#xff0c;快速帮你解决了问题,别忘记点赞收藏 1.首先看效果图 因为版本vue-cropper 众多 &#xff0c;虽然网上有各…

阿里云windwos 安装oracle数据库,外部用工具连接不上,只能在服务器本机通过127.0.0.1 连接

1. 首先检查阿里云服务器安全组端口是否开放 oracle 数据库端口 2. 其次找到oracle 安装的目录&#xff0c;打开这俩个文件&#xff0c;将localhost 修改为 服务器本机名称 3.重启oracle 监听服务&#xff0c;就可以连接了

ModuleNotFoundError: No module named ‘Tkinter‘

ModuleNotFoundError: No module named ‘Tkinter’ Windows 不要用 import tkinter 用from tkinter import * from tkinter import * root Tk() w Label(root, text"Hello, world!") w.pack() root.mainloop()mac python 3.10版本 brew install python-tk3.1…

技术部工作职能规划分析

前言 技术部的职能。以下是一个基本的框架,其中涵盖了技术部在公司中的关键职能和子职能。 主要职能 技术部门的主要职能分为以下几个板块: - 技术规划与战略: 制定技术规划和战略,与业务团队合作确定技术需求。 研究和预测技术趋势,引领公司在技术创新和数字化转型方…

基于springboot实现智慧党建系统项目【项目源码】计算机毕业设计

基于springboot实现智慧党建系统演示 Java技术 Java是由Sun公司推出的一门跨平台的面向对象的程序设计语言。因为Java 技术具有卓越的通用性、高效性、健壮的安全性和平台移植性的特点&#xff0c;而且Java是开源的&#xff0c;拥有全世界最大的开发者专业社群&#xff0c;所以…

【Unity细节】Unity中为什么用字符串加载对象,检查多便都加载不出来—(命名细节)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

【Python】itertools模块,补充:可迭代对象、迭代器

Python中 itertools模块创建高效迭代器、处理序列数据集。 此模块所有函数返回迭代器&#xff0c;可用for循环获取迭代器中的内容&#xff0c;也可用list(...)用列表形式显示内容。 import itertools[ x for x in dir(itertools) if not x.startswith(_)] # 结果&#xff1a;…

什么是网络爬虫技术?它的重要用途有哪些?

网络爬虫&#xff08;Web Crawler&#xff09;是一种自动化的网页浏览程序&#xff0c;能够根据一定的规则和算法&#xff0c;从互联网上抓取和收集数据。网络爬虫技术是随着互联网的发展而逐渐成熟的一种技术&#xff0c;它在搜索引擎、数据挖掘、信息处理等领域发挥着越来越重…

Centos/Linux安装Apahce出现bug汇总

源码安装Apache软件 使用软件&#xff1a;Apahce2.4.58&#xff0c;apr1.5.2&#xff0c; apr-util1.5.4 1.下载apr、apr-util和Apache软件&#xff1b; 2.安装apr压缩包&#xff0c;步骤如下&#xff1a; 第一、解压缩 tar zxvf apr-1.5.2.tar.gz第二、安装 cd /usr/local/sr…

RAID的应用场景以及优缺点

RAID 0(条带化)&#xff1a; 工作原理&#xff1a; 数据被分成块&#xff0c;每个块写入不同的驱动器&#xff0c;以并行方式提高读写性能。 优势&#xff1a; 卓越的性能提升&#xff0c;特别是对于大型文件的读写操作。 劣势&#xff1a; 完全没有冗余&#xff0c;一个驱动器…

MFC 中创建并显示二维码

1.创建并显示 QRcode* pQR_Encode; pQR_Encode QRcode_encodeString("12345678901234567890", 0, QR_ECLEVEL_H, QR_MODE_8, 1); if (pQR_Encode) { int nBmpWidth pQR_Encode->width; //获取控件的边界大小 CRect rect; Ge…

通俗理解词向量模型,预训练模型,Transfomer,Bert和GPT的发展脉络和如何实践

最近研究GPT&#xff0c;深入的从transfomer的原理和代码看来一下&#xff0c;现在把学习的资料和自己的理解整理一下。 这个文章写的很通俗易懂&#xff0c;把transformer的来龙去脉&#xff0c;还举例了很多不错的例子。 Transformer通俗笔记&#xff1a;从Word2Vec、Seq2S…

6 个有效且可用的顶级 Android 数据恢复工具

经过测试 42 种数据恢复软件产品&#xff0c;发现奇客数据恢复安卓版是 Android 设备的最佳选择。 过去几十年来&#xff0c;我一直在科技行业工作&#xff0c;经常帮助人们应对计算机灾难&#xff0c;包括丢失数据。 Android 数据恢复应用程序不在您的设备上运行&#xff0c…

IDEA中注释快捷键及模板

单行注释 将光标放置于要注释所在行&#xff0c;使用 Ctrl /&#xff0c; 添加行注释&#xff0c;再次使用&#xff0c;去掉行注释 若需要将多行进行单行注释&#xff0c;只需要选中要注释的多行&#xff0c;然后使用 Ctrl /&#xff0c; 添加行注释&#xff0c;再次使用&a…

【PTA题目】L1-6 整除光棍 分数 20

L1-6 整除光棍 分数 20 全屏浏览题目 切换布局 作者 翁恺 单位 浙江大学 这里所谓的“光棍”&#xff0c;并不是指单身汪啦~ 说的是全部由1组成的数字&#xff0c;比如1、11、111、1111等。传说任何一个光棍都能被一个不以5结尾的奇数整除。比如&#xff0c;111111就可以被…