web前端表格导出（1）

前端文件导出（1）

纯前端操作和前后端操作

后面为具体操作

1.文件导出基础

web 前端，在firefox 和Chrome 中使用 a 标签（或者js）就可以实现，如下：其中

download 设置下载的文件名。
href 加上 data:text/txt;charset=utf-8 分别设置点击link 是下载文件， 编码是utf-8 . 这个逗号后面的就是保存在文件中的内容了

如果文件导出的是一个table，需要解决的问题？
问题1： 如何分行， 分列？
理论上 ： 分列使用 “,” 号分割， 分行用 \n。
可以用以上方式，会发现列可以分开，但是不换行。 看上去不认识 \n.

解决方式是使用 encodeURIComponent 进行编码
以上使用的都是utf-8 编码，理论上导出中文应该不是问题。
但是导出csv 格式的话， 使用Excel 打开会发现中文是乱码，但是用其他文本程序打开确是正常的。
原因就是少了一个 BOM头 。 \ufeff。

结果

2.纯前端导出

具体实现步骤

1.安装依赖

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

注意：如果运行时，报如下所示的错误

把require(‘script-loader!vendor/Blob’)改为 require(’./Blob.js’)

2.导入Blob.js 和 Export2Excel.js

获取 Blob.js 和 Export2Excel.js 下载
下载Blob.js和Export2Excel.js后，在src目录下新建vendor文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

3. 挂载到全局

//excel导出
import {export_json_to_excel} from "@/vendor/Export2Excel"
Vue.prototype.exportExcel = export_json_to_excel;

4.组件中使用

			// 数据样式
            List1: [{
              name:'张三',
              Score: '89'
            },
            {
              name:'李四',
              Score: '99'
            },
            {
              name:'ZJZ',
              Score: '48'
            }]
        handleDownload1:function(){
            let that = this; 
            const tHeader = ["姓名","成绩"];  // 表头
            const filterVal = ["name","Score"]; // 对应数据字段
            const list = that.List1; // 存放数据
            const dataExcel = that.formatJson1(filterVal, list); // 这里为参数过滤
            //exportExcel 在全局挂载  tHeader 表头 dataExcel 表格数据 
            that.exportExcel(tHeader, dataExcel, "考试成绩");
        },
        // 参数过滤
        formatJson1(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                    if(v["Score"] != null ){
                        if(v["Score"]  >= 80 ){
                           v[j] = '合格';
                        }else{
                            v[j] = '不合格';
                        }
                    }
                    return v[j];
            }));
        },

3.前后端导出

太长了 下一篇
点击进入