vue脚手架实现a标签下载文件

最新推荐文章于 2024-07-23 20:33:37 发布

GXJ_128

最新推荐文章于 2024-07-23 20:33:37 发布

阅读量609

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/m0_49423813/article/details/111934381

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.template直接加

在这里插入图片描述

<a
   :href="`${$store.state.fileUrl}${item.filePath}`"
   :download="item.fileOldName"
>
  {{ item.fileOldName }}
	<i
	   class="el-icon-download"
	   style="float: right;line-height:30px"
	/>
</a>

2.在methods创建方法

在这里插入图片描述

writeUploadFile(val) {
      const fileName = val.fileOldName;
      const linkNode = document.createElement('a');
      linkNode.style.display = 'none';
      linkNode.href = `${this.$store.state.fileUrl}${val.filePath}`;
      linkNode.download = fileName;
      document.body.appendChild(linkNode);
      linkNode.click();
      URL.revokeObjectURL(linkNode.href);
      document.body.removeChild(linkNode);
    },

3.后台接口返回blob流

在这里插入图片描述
此时请求接口 responseType: ‘blob’,
如有文件损坏 responseType: ‘arraybuffer’,

async writeLogs() {
      const writeLogs = await writeOperationLogList();
      if (writeLogs) {
        const blob = new Blob([writeLogs], { type: 'application/vnd.ms-excel' });
        const fileName = '操作日志.xlsx';
        if ('download' in document.createElement('a')) {
          const linkNode = document.createElement('a');
          linkNode.style.display = 'none';
          linkNode.href = URL.createObjectURL(blob);
          linkNode.download = fileName;
          document.body.appendChild(linkNode);
          linkNode.click();
          URL.revokeObjectURL(linkNode.href);
          document.body.removeChild(linkNode);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      }
    },