原生html下载,弹出弹窗

先看样式图
原生html下载,弹出弹窗_第1张图片
具体代码:

html代码
<div class="create-topic-top-down text-a" @click="tableToExcel(datas,'生成的选题')">下载</div>
datas是你要下载的数组
 // 下载
    tableToExcel (data, parttitle) {

      //要导出的json数据,数组格式
      var jsonData = []; let str = '';

      data.forEach(function (item) {
        jsonData.push({
          "name": item.title,
        })
      })
      //jsonData = data;
      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标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名

      link.download = "" + parttitle + ".csv";

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

你可能感兴趣的:(前端,html,json,前端,vue)