导出文件到指定路径??
需求:点击导出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>相关文章:
导出文件到指定路径??
需求:点击导出pdf按钮,弹出系统文件夹弹框,可以选择保存文件的位置。 经查询window.showSaveFilePicker可实现,但这个api处于实验阶段,且用下来确实和浏览器类型、浏览器版本、以及本身api就不稳定有关系。 代码见下…...
腾讯微服务平台TSF学习笔记(二)--如何使用spring cloud zuul实现线上流量复制
需求提了n遍了,好好好,那这个需求就由我测试来做 1.在zuul端配置: ●假设provider-mirror是provider-demo的灰度应用 package com.tencent.tsf.msgw.zuul1.filter;import com.netflix.zuul.ZuulFilter; import com.netflix.zuul.context.Re…...
React自定义Hook之useRequest
一、简介 通过自定义hook,实现对http请求封装。 支持loading状态判断请求进度,支持获取请求正确和错误结果。 二、技术方案 use request hook export const useRequest (options) > {// 请求参数const [url, ...init] options;// 请求返回的数…...
【LeetCode】挑战100天 Day13(热题+面试经典150题)
【LeetCode】挑战100天 Day13(热题面试经典150题) 一、LeetCode介绍二、LeetCode 热题 HOT 100-152.1 题目2.2 题解 三、面试经典 150 题-153.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站,提供各种算法和数据结构的题目&…...
Android 11.0 SystemUI 去掉状态栏wifi流量上下行图标功能实现
1.概述 在11.0系统定制rom开发中,在关于systemui的定制功能总,在SystemUI 状态栏上显示时钟,电池电量 wifi图标,在显示wifi图标时,网络实时更新时,但是会时不时显示上下行图标 显得很不美观,客户需求要求不显示上下行图标,所以需要去掉上下行图标功能,接下来实现相关功能…...
掌握Net User命令:轻松创建、修改、删除和查看本地用户帐户
net user 命令用于管理本地用户帐户。它可以用于创建、修改、删除用户帐户,以及查看用户帐户的信息 在Windows操作系统中,Net User命令是一个强大的工具,它允许管理员创建、修改、删除和查看本地用户帐户。无论你是IT专业人士还是普通用户&am…...
性能优化中使用Profiler进行页面卡顿的排查及解决方式
文章目录 一、前言二、页面卡顿的排查方式1、耗时操作的监控2、页面卡顿的监控 三、参考链接 一、前言 程序的优化在做过线上bug处理,布局层级优化,项目依赖库版本更新,重复库合并,删除未使用的资源,删除冗余的库&…...
深入了解Java8新特性-日期时间API_LocalDate类
阅读建议 嗨,伙计!刷到这篇文章咱们就是有缘人,在阅读这篇文章前我有一些建议: 本篇文章大概12000多字,预计阅读时间长需要10分钟。本篇文章的实战性、理论性较强,是一篇质量分数较高的技术干货文章&…...
PyTorch基本操作和工作流程
1. PyTorch基础 张量(Tensors): 学习 PyTorch 中表示数据的基本单元。了解如何创建、操作和使用张量。 自动微分(Autograd): 了解 PyTorch 的自动微分机制,这是训练神经网络的核心。 模型定义…...
Android开发从0开始(ContentProvider与数据)
内容提供者:ContentProvider 为App存取内部数据提供外部接口,让不同应用共享数据。 ①在配置里AndroidManifest.xml <provider android:name".UserInfoProvider" android:authorities"com.example.chapter07_server.provider.U…...
STM32_6(TIM)
TIM定时器(第一部分) TIM(Timer)定时器定时器可以对输入的时钟进行计数,并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元,在72MHz计数时钟下可以实现最大59.65s的定时不仅…...
Linux中flask项目开启https访问
1.下载阿里云免费证书 2.项目添加https配置 3.服务器开启https访问 3.1 重新安装OpenSSL 3.2.重新安装Python 上一次已经讲过Linux安装部署Python: Linux安装Python3.10与部署flask项目实战详细记录,今天记录一下Python项目如何支持https访问…...
Kubernetes 离线部署 Spinnaker
离线部署 Spinnaker 离线部署 spinnaker 需要提前准备以下依赖项 halyard 安装工具:该hal命令的apt源地址https://us-apt.pkg.dev/projects/spinnaker-community位于国外halyard boms物料清单:Spinnaker 将其halyard boms配置存储在公共谷歌云存储 ( g…...
TypeScript 学习笔记 第三部分 贪吃蛇游戏
尚硅谷TypeScript教程(李立超老师TS新课) 1. 创建开发环境 创建工程,使用学习笔记的第二部分安装css部分 npm i -D less less-loader css-loader style-loader对css部分处理,能够运行在低版本浏览器 npm i -D postcss postcss…...
【spring(一)】核心容器总结
🌈键盘敲烂,年薪30万🌈 目录 IOC 配置bean对象: DI 注入bean对象 ①.setter方法注入 ②.构造器注入 Bean的实例化 1.setter方法注入(重点) 2.静态工厂(了解) 3.实例工厂(了解࿰…...
易点易动固定资产管理系统:实现全面的固定资产采购管理
在现代企业中,固定资产采购管理是一项关键的任务。为了确保企业的正常运营和发展,有效管理和控制固定资产采购过程至关重要。易点易动固定资产管理系统为企业提供了一种全面的解决方案,整合了从采购需求、采购计划、询比价、采购合同到采购执…...
力扣:178. 分数排名(Python3)
题目: 表: Scores ---------------------- | Column Name | Type | ---------------------- | id | int | | score | decimal | ---------------------- 在 SQL 中,id 是该表的主键。 该表的每一行都包含了一场比赛的分数。Score …...
raid磁盘阵列
在单机时代,采用单块磁盘进行数据存储和读写的方式,由于寻址和读写的时间消耗,导致I/O性能非常低,且存储容量还会受到限制。另外,单块磁盘极其容易出现物理故障,经常导致数据的丢失。此时,RAID技…...
SpringBoot学习笔记-实现微服务:匹配系统(上)
笔记内容转载自 AcWing 的 SpringBoot 框架课讲义,课程链接:AcWing SpringBoot 框架课。 CONTENTS 1. 配置WebSocket2. 前后端WebSocket通信2.1 WS通信的建立2.2 加入JWT验证 3. 前后端匹配业务3.1 实现前端页面3.2 实现前后端交互逻辑3.3 同步游戏地图 …...
重磅!全球首个“绿色黑灯工厂”落户中国,竟然是这家企业……
作者:叶蓁 “52”、“白加黑”、“无人看守作业”,这是九牧“绿色黑灯工厂”的几大关键词。 九牧绿色黑灯工厂不仅是单体产量最大的工厂,也是全球首个入选的“绿色黑灯工厂”。 11月17日,中国节能协会授予九牧5G智能马桶工厂全球…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知,帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量,能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度,还为机器人、医疗设备和制造业的智…...
LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》
🧠 LangChain 中 TextSplitter 的使用详解:从基础到进阶(附代码) 一、前言 在处理大规模文本数据时,特别是在构建知识库或进行大模型训练与推理时,文本切分(Text Splitting) 是一个…...
【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)
旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据!该数据集源自2025年4月发表于《地理学报》的论文成果…...
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践,很多人以为AI已经强大到不需要程序员了,其实不是,AI更加需要程序员,普通人…...
