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;
               }*/
            }