Vue：a标签点击和file-saver实现文件下载

方式一：a标签点击实现

<template>
  <div class=""> <el-button size="small" @click="downloadFile" >保存文件</el-button>
  </div>
</template>

<script>
export default {
  methods: { downloadFile() { var blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8', }); // 存在浏览器兼容性 let href = URL.createObjectURL(blob); let alink = document.createElement('a'); alink.style.display = 'none'; alink.download = '文件名.txt'; //下载后文件名 alink.href = href; document.body.appendChild(alink); alink.click(); document.body.removeChild(alink); //下载完成移除元素 URL.revokeObjectURL(href); //释放掉blob对象 },
  },
};
</script>

<style lang="scss" scoped>
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
 

方式二：file-saver实现保存

文档：https://www.npmjs.com/package/file-saver

依赖

npm i file-saver

  

 

  
1
 

语法

FileSaver saveAs(Blob/File/Url, 
	optional DOMString filename, 
	optional Object { autoBom }
	)

  

 

  
1
  
2
  
3
  
4
 

示例

<template>
  <div class=""> <el-button size="small" @click="saveFile" >保存文件</el-button>
  </div>
</template>

<script>
/**
 * 文件保存
 */
import FileSaver from 'file-saver';

export default {
  methods: { saveFile() { var blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8', }); FileSaver.saveAs(blob, '文件名.txt'); },
  },
};
</script>

<style lang="scss" scoped>
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/111958466