当前位置: 首页 > 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>

相关文章:

导出文件到指定路径??

需求&#xff1a;点击导出pdf按钮&#xff0c;弹出系统文件夹弹框&#xff0c;可以选择保存文件的位置。 经查询window.showSaveFilePicker可实现&#xff0c;但这个api处于实验阶段&#xff0c;且用下来确实和浏览器类型、浏览器版本、以及本身api就不稳定有关系。 代码见下…...

腾讯微服务平台TSF学习笔记(二)--如何使用spring cloud zuul实现线上流量复制

需求提了n遍了&#xff0c;好好好&#xff0c;那这个需求就由我测试来做 1.在zuul端配置&#xff1a; ●假设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&#xff0c;实现对http请求封装。 支持loading状态判断请求进度&#xff0c;支持获取请求正确和错误结果。 二、技术方案 use request hook export const useRequest (options) > {// 请求参数const [url, ...init] options;// 请求返回的数…...

【LeetCode】挑战100天 Day13(热题+面试经典150题)

【LeetCode】挑战100天 Day13&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-152.1 题目2.2 题解 三、面试经典 150 题-153.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…...

Android 11.0 SystemUI 去掉状态栏wifi流量上下行图标功能实现

1.概述 在11.0系统定制rom开发中,在关于systemui的定制功能总,在SystemUI 状态栏上显示时钟,电池电量 wifi图标,在显示wifi图标时,网络实时更新时,但是会时不时显示上下行图标 显得很不美观,客户需求要求不显示上下行图标,所以需要去掉上下行图标功能,接下来实现相关功能…...

掌握Net User命令:轻松创建、修改、删除和查看本地用户帐户

net user 命令用于管理本地用户帐户。它可以用于创建、修改、删除用户帐户&#xff0c;以及查看用户帐户的信息 在Windows操作系统中&#xff0c;Net User命令是一个强大的工具&#xff0c;它允许管理员创建、修改、删除和查看本地用户帐户。无论你是IT专业人士还是普通用户&am…...

性能优化中使用Profiler进行页面卡顿的排查及解决方式

文章目录 一、前言二、页面卡顿的排查方式1、耗时操作的监控2、页面卡顿的监控 三、参考链接 一、前言 程序的优化在做过线上bug处理&#xff0c;布局层级优化&#xff0c;项目依赖库版本更新&#xff0c;重复库合并&#xff0c;删除未使用的资源&#xff0c;删除冗余的库&…...

深入了解Java8新特性-日期时间API_LocalDate类

阅读建议 嗨&#xff0c;伙计&#xff01;刷到这篇文章咱们就是有缘人&#xff0c;在阅读这篇文章前我有一些建议&#xff1a; 本篇文章大概12000多字&#xff0c;预计阅读时间长需要10分钟。本篇文章的实战性、理论性较强&#xff0c;是一篇质量分数较高的技术干货文章&…...

PyTorch基本操作和工作流程

1. PyTorch基础 张量&#xff08;Tensors&#xff09;&#xff1a; 学习 PyTorch 中表示数据的基本单元。了解如何创建、操作和使用张量。 自动微分&#xff08;Autograd&#xff09;&#xff1a; 了解 PyTorch 的自动微分机制&#xff0c;这是训练神经网络的核心。 模型定义…...

Android开发从0开始(ContentProvider与数据)

内容提供者&#xff1a;ContentProvider 为App存取内部数据提供外部接口&#xff0c;让不同应用共享数据。 ①在配置里AndroidManifest.xml <provider android:name".UserInfoProvider" android:authorities"com.example.chapter07_server.provider.U…...

STM32_6(TIM)

TIM定时器&#xff08;第一部分&#xff09; TIM&#xff08;Timer&#xff09;定时器定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在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 安装工具&#xff1a;该hal命令的apt源地址https://us-apt.pkg.dev/projects/spinnaker-community位于国外halyard boms物料清单&#xff1a;Spinnaker 将其halyard boms配置存储在公共谷歌云存储 ( g…...

TypeScript 学习笔记 第三部分 贪吃蛇游戏

尚硅谷TypeScript教程&#xff08;李立超老师TS新课&#xff09; 1. 创建开发环境 创建工程&#xff0c;使用学习笔记的第二部分安装css部分 npm i -D less less-loader css-loader style-loader对css部分处理&#xff0c;能够运行在低版本浏览器 npm i -D postcss postcss…...

【spring(一)】核心容器总结

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 IOC 配置bean对象&#xff1a; DI 注入bean对象 ①.setter方法注入 ②.构造器注入 Bean的实例化 1.setter方法注入(重点) 2.静态工厂&#xff08;了解&#xff09; 3.实例工厂&#xff08;了解&#xff0…...

易点易动固定资产管理系统:实现全面的固定资产采购管理

在现代企业中&#xff0c;固定资产采购管理是一项关键的任务。为了确保企业的正常运营和发展&#xff0c;有效管理和控制固定资产采购过程至关重要。易点易动固定资产管理系统为企业提供了一种全面的解决方案&#xff0c;整合了从采购需求、采购计划、询比价、采购合同到采购执…...

力扣:178. 分数排名(Python3)

题目&#xff1a; 表: Scores ---------------------- | Column Name | Type | ---------------------- | id | int | | score | decimal | ---------------------- 在 SQL 中&#xff0c;id 是该表的主键。 该表的每一行都包含了一场比赛的分数。Score …...

raid磁盘阵列

在单机时代&#xff0c;采用单块磁盘进行数据存储和读写的方式&#xff0c;由于寻址和读写的时间消耗&#xff0c;导致I/O性能非常低&#xff0c;且存储容量还会受到限制。另外&#xff0c;单块磁盘极其容易出现物理故障&#xff0c;经常导致数据的丢失。此时&#xff0c;RAID技…...

SpringBoot学习笔记-实现微服务:匹配系统(上)

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义&#xff0c;课程链接&#xff1a;AcWing SpringBoot 框架课。 CONTENTS 1. 配置WebSocket2. 前后端WebSocket通信2.1 WS通信的建立2.2 加入JWT验证 3. 前后端匹配业务3.1 实现前端页面3.2 实现前后端交互逻辑3.3 同步游戏地图 …...

重磅!全球首个“绿色黑灯工厂”落户中国,竟然是这家企业……

作者&#xff1a;叶蓁 “52”、“白加黑”、“无人看守作业”&#xff0c;这是九牧“绿色黑灯工厂”的几大关键词。 九牧绿色黑灯工厂不仅是单体产量最大的工厂&#xff0c;也是全球首个入选的“绿色黑灯工厂”。 11月17日&#xff0c;中国节能协会授予九牧5G智能马桶工厂全球…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...