vue3使用下载附件功能

news2024/11/25 5:57:01

效果:

点击即可以下载打开。

代码:

                      <div v-show="item.attachment.length > 0">
                        <h3>下载附件</h3>
                        <div
                          v-for="(doc, docIndex) in item.attachment"
                          :key="docIndex"
                        >
                          <a
                            style="color: #4183c4"
                            :class="['file', docIndex == 0 ? 'firstFile' : '']"
                            @click="
                              fetchExportBill(
                                `${downloadUrl}?Id=${doc.fileId}`,
                                doc.disPlayName
                              )
                            "
                            :download="doc.disPlayName"
                          >
                            <file-zip-outlined
                              style="font-size: 14px; margin-right: 5px"
                            />{{ doc.disPlayName }}
                            <!-- <a-icon type="file-zip" style="font-size: 14px; margin-right: 5px" />{{ doc.disPlayName }} -->
                          </a>
                        </div>
                      </div>

 

 

const { downloadUrl } = window.defaultconfig;
function fetchExportBill(url, name) {
  axios.get(url, { responseType: "arraybuffer" }).then((res) => {
    const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
    const objectUrl = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.download = name;
    a.href = objectUrl;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  });
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/765166.html

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

相关文章

WebSocket集群解决方案,不用MQ

首先不了解WebSocket的可以先看看这篇文章&#xff0c;以及传统的WebSocket方案是怎么做的&#xff0c;https://www.cnblogs.com/jeremylai7/p/16875115.html 这是用MQ解决的版本&#xff0c;那么这种方案存在什么问题呢。 第一&#xff1a;增加MQ&#xff0c;可能造成消息挤压…

动态内存分配(3)——柔性数组

前言&#xff1a; 以前我们所学数组&#xff08;包括变长数组&#xff09;&#xff0c;在数组声明的时候&#xff0c;就必须指定数组的大小&#xff0c;它所需要的内存在编译时分配。但是有时候需要的数组大小在程序运行的时候才能知道&#xff0c;该怎么办呢&#xff1f;这就是…

Zookeeper+kafka的应用及部署

Zookeeperkafka的应用及部署 一、Zookeeper的概念1、Zookeeper 定义2、Zookeeper 工作机制3、Zookeeper 特点4、Zookeeper 数据结构5、Zookeeper 应用场景6、Zookeeper 选举机制&#xff08;1&#xff09;第一次启动选举机制&#xff08;2&#xff09;非第一次启动选举机制(1)、…

【Ajax】笔记-NodeMon 简介、安装、使用

NodeMon 简介、安装、使用 简介安装启动应用测试 简介 nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。以前&#xff0c;我们开发一个node后端服务时&#xff0c;每次更改文件&#xff0c;均需重启一下&#xff0c;服务才能生效。这使我们…

阿里云RocketMQ——高可用、高可靠的分布式消息处理系统

阿里云产品测评-RocketMQ 今天我对阿里的又一产品进行了深度测评&#xff08;RocketMQ&#xff09;&#xff0c;首先如果是新用户的话&#xff0c;可以先关注下面这个免费体验的活动。 一、上手实操 阿里云免费试用 1.付费或者免费开通RocketMQ 云消息队列 RocketMQ 版是阿…

容器云平台监控告警体系(四)—— Golang应用接入Prometheus

1、概述 目前容器云平台中的容器仅支持获取CPU使用率、内存使用率、网络流入速率和网络流出速率这4个指标&#xff0c;如果想监控应用程序的性能指标或者想更加细粒度的监控应用程序的运行状态指标的话&#xff0c;则需要在应用程序中内置对Prometheus的支持或者部署独立于应用…

悦数图数据库v3.5.0发布:查询性能大幅提升,为智能决策和 AI 大模型应用提速

近日&#xff0c;悦数图数据库最新版本&#xff08;v3.5.0&#xff09;正式发布&#xff0c;作为国内首个能够容纳千亿点、万亿边并保持毫秒级查询延时的企业级原生分布式图数据库&#xff0c;悦数图数据库 3.5.0 版本进一步强化了数据库内核的查询性能和稳定性&#xff0c;同时…

socks协议详解

0x01 socks协议简介 Socks&#xff08;Socket Secure&#xff09;协议是一种网络协议&#xff0c;处于会话层&#xff0c;用于管理网络连接并提供安全性和隐私保护。通过使用Socks代理服务器&#xff0c;客户端可以隐藏其真实IP地址和其他身份信息&#xff0c;从而匿名地访问互…

机器学习 day28(模型评估)

为什么需要模型评估 我们可以借助图像来判断模型是否良好。但当我们用单一特征来绘制f(x)图像时&#xff0c;模型容易出现过拟合现象。但如果增加一些输入特征的种类&#xff0c;绘制图像又会变得很困难。而模型评估可以解决这一痛点。 模型评估 通常我们将数据集的一大半…

[C语言]if语句详解

C语言初阶系列 分支语句和循环语句&#xff08;1&#xff09; 目录 C语言初阶系列 前言 一&#xff0c;什么是语句&#xff1f; 1.1如何理解语句&#xff1f; 二&#xff0c;分支语句&#xff08;选择结构&#xff09; 2.1,if语句 2.2,if语句的错误的条件写法 2.2,if语…

Houdini Vex 补缺

一. transorm —— move—— scale—— rot1.这里 补2 个函数 quaternion( ) &#xff08;角度&#xff08;弧度制&#xff09;, 轴&#xff09; 获取4元数 qroate( ) &#xff08;quaternion &#xff0c;点坐标&#xff09; 进行旋转 案例&#xff1a; 参考 视频连接 般 b站…

【山河送书第三期】:《Python机器学习:基于PyTorch和Scikit-Learn 》赠书四本!!

【山河送书第三期】&#xff1a;《Python机器学习&#xff1a;基于PyTorch和Scikit-Learn 》 前言内容简介作者简介参与方式 前言 近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务…

如何向资深开发人员寻求帮助(并获得帮助)

在程序开发过程中&#xff0c;我们时常会遇到让人挠头的问题。如何寻求帮助&#xff0c;尤其是如何向资深开发人员寻求帮助&#xff0c;是一门值得学习的技艺。这并不只是简单地把问题抛出来&#xff0c;而是需要学会在何时求助&#xff0c;如何提问&#xff0c;如何理解答案&a…

股票量化系统QTYX选股框架实战案例集|越强的龙头出分歧,越大可能出反包-230717...

前言 “实战案例个股画像”系列和大家分享我基于QTYX选股框架&#xff0c;在实战中选股的案例&#xff0c;和大家一起见证QTYX选股框架逐步完善的过程&#xff0c;帮助大家理解QTYX的精髓。 关于QTYX的使用攻略可以查看链接&#xff1a;QTYX使用攻略 关于QTYX初衷和精髓可以查看…

怎么用Midjourney制作表情包

要使用Midjourney制作表情包&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 打开Midjourney的官方网站或下载Midjourney应用程序&#xff0c;并登录你的账户。 2. 在Midjourney中&#xff0c;选择创建新项目或表情包。 3. 在项目中&#xff0c;你可以选择使用预设的模…

【学习笔记】浅谈最小生成树及重构树

板子传送门 定义 生成树 一个连通图的生成树是一个极小的连通子图&#xff0c;它包含图中全部的 n n n 个顶点&#xff0c;但只有构成一棵树的 n − 1 n-1 n−1 条边。 最小生成树 其实就是一个图中最小的一个生成树 所谓一个 带权图 的最小生成树&#xff0c;就是原图中…

Label基本用法

作用&#xff1a;是一个标签&#xff0c;可以用来显示文本&#xff1b; 常用属性&#xff1a; 常用事件&#xff1a; 后台代码示范&#xff1a; //d单击标签时触发private void label1_Click(object sender, EventArgs e){MessageBox.Show("标签被单击");//获取标签…

Python(十九)python中的注释

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

优化算法之梯度下降|Matlab实现梯度下降算法

题目要求&#xff1a; 使用Matab实现梯度下降法 对于函数&#xff1a; min ⁡ f ( x ) 2 x 1 2 4 x 2 2 − 6 x 1 − 2 x 1 x 2 \min f(x)2 x_{1}^{2}4 x_{2}^{2}-6 x_{1}-2 x_{1} x_{2} minf(x)2x12​4x22​−6x1​−2x1​x2​ 试采用 MATLAB实现最速下降法求解该问题, 给…

深度学习路线

深度学习路线 机器学习视频 吴恩达 http://open.163.com/special/opencourse/machinelearning.html 神经网络深度学习在线教程 共六章 http://neuralnetworksanddeeplearning.com 《神经网络设计》 国外经典教程 第十一章 反向传播 CNN:《Notes On Convolutional Neutral Netw…