背景
- luckysheet 還沒有實(shí)現(xiàn)打印
- luckysheet 暴露了一個(gè) getScreenshot 方法兼蕊，可以返回表格指定選區(qū)的base64格式的截圖
- luckysheet忧吟，點(diǎn)擊表格左上角可以實(shí)現(xiàn)全選功能
- 利用 vue-print-nb 第三方庫(kù)，調(diào)用系統(tǒng)打印
思路
點(diǎn)擊打印按鈕：
第一步：實(shí)現(xiàn)全選帜消；
第二步：生成選區(qū)的截圖；
第三步：根據(jù)選區(qū)生成打印內(nèi)容浓体，并調(diào)用系統(tǒng)打印
效果圖
01.png
點(diǎn)擊01圖片中的 打印按鈕后 的效果.png
代碼實(shí)現(xiàn)
<template>
<div class="layout">
<div class="layout-right">
<div class="block">
<div class="download">
<a v-if="reportCode != null" download="xxx.xlsx">
<el-button @click="download('gaea_template_excel')" type="success" plain>導(dǎo)出excel</el-button>
</a>
<div v-if="reportCode != null">
<el-button @click="printFn" type="success" plain v-print="'#print_html'">打印</el-button>
</div>
</div>
<el-form>
<h2>表格查詢</h2>
<div v-for="(item, num) in tableData2" :key="num + 'excel'">
<h4>{{ item.name }}</h4>
<div v-for="(son, y) in item.children" :key="y + 'excel2'" class="search_input">
<label>{{ son.name }}：</label>
<el-input v-model="son.value" />
</div>
</div>
<el-button style="width: 100%" @click="searchPreview" type="primary" plain>查詢</el-button>
</el-form>
</div>
</div>
<div class="layout-middle">
<div id="luckysheet" />
</div>
<div id="print_html" style="text-align: center;"></div>
</div>
</template>
<script>
export default {
methods: {
//初始化表格
createSheet(){
// 整體配置
const options = {
container: 'luckysheet', // 設(shè)定DOM容器的id
title: '報(bào)表設(shè)計(jì)', // 設(shè)定表格名稱
lang: 'zh', // 設(shè)定表格語(yǔ)言
plugins:['chart'],
data:[
{
"name": "report", //工作表名稱
"color": "", //工作表顏色
"index": 0, //工作表索引
"status": 1, //激活狀態(tài)
"order": 0, //工作表的下標(biāo)
"hide": 0,//是否隱藏
"row": 36, //行數(shù)
"column": 18, //列數(shù)
"defaultRowHeight": 19, //自定義行高
"defaultColWidth": 73, //自定義列寬
"celldata": [], //初始化使用的單元格數(shù)據(jù)
"config": {
"merge":{}, //合并單元格
"rowlen":{}, //表格行高
"columnlen":{}, //表格列寬
"rowhidden":{}, //隱藏行
"colhidden":{}, //隱藏列
"borderInfo":{}, //邊框
"authority":{}, //工作表保護(hù)
},
"scrollLeft": 0, //左右滾動(dòng)條位置
"scrollTop": 315, //上下滾動(dòng)條位置
"luckysheet_select_save": [], //選中的區(qū)域
"calcChain": [],//公式鏈
"isPivotTable":false,//是否數(shù)據(jù)透視表
"pivotTable":{},//數(shù)據(jù)透視表設(shè)置
"filter_select": {},//篩選范圍
"filter": null,//篩選配置
"luckysheet_alternateformat_save": [], //交替顏色
"luckysheet_alternateformat_save_modelCustom": [], //自定義交替顏色
"luckysheet_conditionformat_save": {},//條件格式
"frozen": {}, //凍結(jié)行列配置
"chart": [], //圖表配置
"zoomRatio":1, // 縮放比例
"image":[], //圖片
"showGridLines": 1, //是否顯示網(wǎng)格線
"dataVerification":{} //數(shù)據(jù)驗(yàn)證配置
}
],
// 行數(shù)和列數(shù)都設(shè)置為1可以自動(dòng)去掉空的單元格
row: 1,
column: 1,
// 是否顯示頂部信息欄
showinfobar: false,
// 是否顯示公式欄
sheetFormulaBar: false,
// 是否顯示底部sheet頁(yè)按鈕
// showsheetbar: false,
// 是否顯示工具欄
showtoolbar: false,
// 允許添加行
enableAddRow: false,
// 允許回到頂部
enableAddBackTop: false,
// 不允許編輯
allowEdit: false,
// 去掉行號(hào)列
rowHeaderWidth: 0,
// 去掉列號(hào)行
columnHeaderHeight: 0,
// 底部sheet頁(yè)配置
showsheetbarConfig: {
add: false, // 添加sheet
menu: false, // sheet菜單
sheet: true, // sheet頁(yè)
},
// sheet頁(yè)右擊菜單
sheetRightClickConfig: {
delete: false, // 刪除
copy: false, // 復(fù)制
rename: false, //重命名
color: false, //更改顏色
hide: false, //隱藏泡挺，取消隱藏
move: false, //向左移，向右移
},
};
this.filterFn(); // 過濾數(shù)據(jù)（去掉空白的行和列）
options.data = this.sheetData; // 工作表配置(也就是每個(gè)sheet表)
$(function () {
luckysheet.create(options);
});
},
// 打印
printFn() {
// 1. 實(shí)現(xiàn)全選
$('#luckysheet-left-top').click();
// 2. 生成選區(qū)的截圖
let src = luckysheet.getScreenshot();
let $img = `<img src=${src} style="max-width: 90%;" />`
this.$nextTick(() => {
document.querySelector('#print_html').innerHTML = $img;
})
// 3. 調(diào)用系統(tǒng)打用 ：已經(jīng)用v-print指令綁定在打印按鈕上
},
}
}
</script>
