pc端纯前端实现文件下载

说明：下面的例子都是使用vue写的例子 

1.txt下载

利用a标签进行下载

    onClickDownDaily() {
      //定义文件内容，类型必须为Blob 否则createObjectURL会报错
      const jsonData = [
        {
          name: "路人甲",
          phone: "123456789",
          email: "000@123456.com",
        },
        {
          name: "炮灰乙",
          phone: "123456789",
          email: "000@123456.com",
        },
        {
          name: "土匪丙",
          phone: "123456789",
          email: "000@123456.com",
        },
        {
          name: "流氓丁",
          phone: "123456789",
          email: "000@123456.com",
        },
      ];
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = `姓名,电话,邮箱\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for (let i = 0; i < jsonData.length; i++) {
        for (let item in jsonData[i]) {
          str += `${jsonData[i][item] + "\t"},`;
        }
        str += "\n";
      }
      let content = new Blob([str], {
        type: "text/plain",
      });
      console.log(content);
      //生成url对象
      let urlObject = window.URL || window.webkitURL || window;
      let url = urlObject.createObjectURL(content);
      console.log(url);
      //生成<a></a>DOM元素
      let el = document.createElement("a");
      //链接赋值
      el.href = url;
      el.download = "55.txt";//文件名称
      //必须点击否则不会下载
      el.click();
      //移除链接释放资源
      urlObject.revokeObjectURL(url);

}

结果：

 

 

2.导出word文档

模板导出法--其实就是先用word制造出一个模板，数据使用{变量}进行代替。类似于vue插槽。

1.安装插件

npm install jszip-utils pizzip docxtemplater file-saver

2.创建word文档模板（模板存放位置：使用vue-cli2的时候，放在static目录下；使用vue-cli3的时候，放在public目录下）

 

{#nameList} {/nameList}表示循环nameList这个数组中的对象（注意：数组中的值必须为对象，且以key-value形式，才可以通过key值渲染对应value值）

{name},{age},{hobby}表示对象中存放的key值

import JSZipUtils from "jszip-utils";
import JSZip from "pizzip";
import Docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
exportWord() {
       wordData: {
        name: "导出word",
        nameList: [
          {
            name: "张三",
            age: 16,
            hobby: ["吃饭", "睡觉", "打豆豆"],
          },
          {
            name: "李四",
            age: 19,
            hobby: ["抽烟", "喝酒", "打麻将"],
          },
        ],
      },
      ///word.docx是模板，放在public文件夹下面
      JSZipUtils.getBinaryContent("/word.docx", function (error, content) {
        // 抛出异常
        if (error) {
          throw error;
        }
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new JSZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          wordData,
        });
        try {
          // 用模板变量的值替换所有模板变量
          doc.render();
        } catch (error) {
          // 抛出异常
          this.$message.error("导出报表失败");
          throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "试卷.docx");
      });
    },

结果：

 

 

3.csv格式下载

利用a标签进行下载

    onClickDownDaily() {
      //要导出的json数据
      const jsonData = [
        {
          name:'路人甲',
          phone:'123456789',
          email:'000@123456.com'
        },
        {
          name:'炮灰乙',
          phone:'123456789',
          email:'000@123456.com'
        },
        {
          name:'土匪丙',
          phone:'123456789',
          email:'000@123456.com'
        },
        {
          name:'流氓丁',
          phone:'123456789',
          email:'000@123456.com'
        },
      ]
      //列标题，逗号隔开，每一个逗号就是隔开一个单元格
      let str = `姓名,电话,邮箱\n`;
      //增加\t为了不让表格显示科学计数法或者其他格式
      for(let i = 0 ; i < jsonData.length ; i++ ){
        for(let item in jsonData[i]){
            str+=`${jsonData[i][item] + '\t'},`;
        }
        str+='\n';
      }
      //encodeURIComponent解决中文乱码
      let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
      //通过创建a标签实现
      let link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download =  "json数据表.csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
}

结果：