Vue 下载文件txt、json格式等

一、不使用依赖this.code是要导出文件里的内容，（新建一个a标签来下载）//下载txt文件const element = document.createElement('a')element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.code))element.setAttr

ppphhz

4010人浏览 · 2021-11-05 16:44:03

ppphhz · 2021-11-05 16:44:03 发布

一、不使用依赖
this.code是要导出文件里的内容，（新建一个a标签来下载）

//下载txt文件
   const element = document.createElement('a')
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(this.code))
    element.setAttribute('download', 'myCode')
    element.style.display = 'none'
    element.click()

//下载json文件，就改改href
   const element = document.createElement('a')
    element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(this.code))
    element.setAttribute('download', 'myCode')
    element.style.display = 'none'
    element.click()

二、使用FileSaver

npm install file-saver --save

//main.js全局导入（不用use）
 import {saveAs} from 'file-saver';

//this.code是要导出的内容
let str = new Blob([this.code], {type: 'text/plain;charset=utf-8'});
// 文件名自定义，注意这里要手动写上文件的后缀名
//saveAs(str, `myCode.json`);
saveAs(str, `myCode.txt`);

我做的编辑器工具（包含json格式化）