vue 导出报表和打印表格

一，vue导出报表

vue:导出报表

有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为：

1. 安装依赖 //npm npm install -S file-saver xlsx npm install -D script-loader 或者 //yarn yarn add file-saver yarn add xlsx yarn add script-loader --dev 2.导入两个JS 下载Blob.js和Export2Excel.js，在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件 3.在main.js引入这两个JS文件 import Blob from './excel/Blob' import Export2Excel from './excel/Export2Excel.js' 4.在组件中使用 //导出的方法 exportExcel() { require.ensure([], () => { const { export_json_to_excel } = require('../excel/Export2Excel'); const tHeader = ['序号', '昵称', '姓名']; // 上面设置Excel的表格第一行的标题 const filterVal = ['index', 'nickName', 'name']; // 上面的index、nickName、name是tableData里对象的属性 const list = this.tableData; //把data里的tableData存到list const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '列表excel'); }) },

   formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }

tHeader是表头，filterVal 中的数据是表格的字段，tableData中存放表格里的数据，类型为数组，里面存放对象，表格的每一行为一个对象。 tableData 中的值为： data () { return { tableData: [ {'index':'0',"nickName": "沙滩搁浅我们的旧时光", "name": "小明"}, {'index':'1',"nickName": "女人天生高贵", "name": "小红"}, {'index':'2',"nickName": "海是彩色的灰尘", "name": "小兰"} ] } }

如果运行时，报如下所示的错误：the dependency was not found

注： 把require('script-loader!vendor/Blob')改为 require('./Blob.js') demo 地址：https://github.com/dt8888/exportExcel

vue报表最后总计一行：

<el-table 标签中加入show-summary :summary-method="getSummaries"

导出sql:order by 跟行号乱了，解决方案子查询

select @rownum:=@rownum+1 as no, t3.productNameNO, t3.playStartTime, t3.playEndTime, t3.orderTime, t3.productCount, t3.payPrice from ( SELECT concat(t2.product_name,'/',t2.product_sn) productNameNO, t2.play_start_time playStartTime, t2.play_end_time playEndTime, DATE_FORMAT(t1.create_time, '%Y-%m-%d') orderTime, t2.product_quantity productCount, (IFNULL(t2.pay_amount,0) - IFNULL(t2.real_amount, 0) - IFNULL(t2.service_fee,0)) payPrice FROM oms_order t1, oms_order_item t2 WHERE t1.order_sn = t2.order_sn order by t1.create_time desc ) t3, (select @rownum:=0) t4;

 

vue 导出报表字段合并问题？

Vue 导出报表功能，后台数据和导出列表需要合并 const list = result.rows; //把data里的tableData存到list list.forEach((v,index)=>{ v.no=index+1; v.productNameAndNo = v.productName+"/"+v.productNO; });

 

实例：

require.ensure([], () => {
    const { export_json_to_excel } = require('../../../assets/js/Export2Excel');
    const tHeader = ['序号','产品名称/编号','购买数量(人数)','产品金额(人民币)'];
    // 上面设置Excel的表格第一行的标题
    const filterVal = ['no','productNameAndNo', 'productCount','payPrice'];
    // 上面的'no','productNameNO', 'orderTime', 'productCount','payPrice'是tableData里对象的属性
    const list = result.rows;  //把data里的tableData存到list
    list.forEach((v,index)=>{
        v.no=index+1;
        v.productNameAndNo = v.productName+"/"+v.productNO;
    });
    const data = that.formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, '产品报表'+new Date().getTime());
});

formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
}
 

二，打印表格

import {getLodop} from '../../../common/LodopFuncs';//引入lodopFuncs 插件
printHtml:function () {
                let tableHtml="<table  width=\"100%\"  align=\"center\" cellspacing=\"0\" border=\"1\"><thead><tr align=\"center\">"
                let tableHead="<th>结算编号</th><th>分销商名称/编号</th><th>结算类型</th>" +
                    "<th>检票金额(&yen;)</th><th>入园人数</th><th>结算时间</th>"+"</tr></thead>"
                let tableTr=""
                let tlementType=""
                this.role.forEach(item=>{
                    if(item.settlementType=="0"){
                        tlementType="日结"
                    }else if(item.settlementType=="1"){
                        tlementType="周结"
                    }else{
                        tlementType="月结"
                    }
                    tableTr+="<tr align=\"center\"><td>"+item.settlementNo+"</td>"+"<td>"+item.otaName+"/"+item.otaNo+"</td>"+"<td>"+tlementType+"</td>"+
                        "<td>"+item.checkAmount+"</td>"+"<td>"+item.checkNums+"</td>"+"<td>"+item.settlementCycle+"</td></tr>"
                })
               tableHtml=tableHtml+tableHead+tableTr+"</table>"
                let LODOP=getLodop();
                this.$message.closeAll();
                if(!LODOP){
                    this.$message.error({message: "请检测打印控件!", duration: 1000});
                    return;
                }
                this.$message.closeAll();
                LODOP.SET_PRINT_STYLE("FontSize",20);
                LODOP.SET_PRINT_STYLE("Bold",1);
                LODOP.ADD_PRINT_TEXT(8,250,275,30,"检票结算(分)");
                LODOP.SET_PRINT_STYLE("FontSize",10);
                LODOP.SET_PRINT_STYLE("Bold",0.5);
                LODOP.ADD_PRINT_TEXT(60,0,275,30,"打印时间:"+dateformat.formatDate.format(new Date(),'yyyy-MM-dd hh:mm:ss'));
                LODOP.ADD_PRINT_TEXT(60,550,300,30,"签字:");
                LODOP.ADD_PRINT_HTM(80,0,"100%","100%",tableHtml);
                LODOP.PREVIEW();
                //控件返回结果用语句本身：
               /* if (LODOP.PRINTA()){
                   return;
               }*/
            }