最近使用luckysheet时发现,luckysheet目前并不支持打印功能,luckysheet的升级版univer虽然支持打印,但是univer的打印功能并不开源,需要付费升级才可使用打印功能。
虽然luckysheet不支持打印功能,但是可以通过luckysheet提供的api接口实现简单的打印。
本文的项目使用的是vue开发
准备工作:
1.安装vue-print-nb打印插件npm install vue-print-nb --save
2.添加打印按钮
<el-button size="mini" @click="getRangeShow" v-print="'#print-container'">打印</el-button>
3.在页面准备一个隐藏的嵌套div,外层div用于隐藏,不影响页面布局,内层div用于实际打印,内层div不可隐藏,否则打印页面显示空白
<!-- 外层div用于隐藏,不影响页面布局,内层div用于实际打印,内层div不可隐藏,否则打印页面显示空白 -->
<div style="display:none;">
<div id="print-container" style="text-align: center;"></div>
</div>
以下是luckysheet实现打印的三种方法:
第一种(不推荐)
1.调用luckysheet.getRangeHtml将需要打印的区域转换成html代码格式
2.将得到的html内容插入到print-container的div中
3.使用vue-print-nb将div中的内容打印
之所以不推荐这种方法,是在具体使用时发现luckysheet.getRangeHtml()得到的html样式与实际表格中的样式差异有些大,如果表格中不带特殊样式也可以使用这种方法
第二种(推荐,但无法打印插入的图片)
1.调用luckysheet.setRangeShow将需要打印的区域选中
2.调用luckysheet.getScreenshot将选中的区域转为图片的base64格式
3.将得到的图片base64内容插入到print-container的div中
let img = "<img src=" + imgBase64 + " style="max-width: 100%;" />"
document.querySelector("#print-container").innerHTML = img
4.使用vue-print-nb将div中的内容打印
如果表格中不含图片、图表之类的信息使用这种方法足够了
第三种(推荐,但需要修改luckysheet源码,添加支持打印插入图片的api)
1.进入luckysheet的仓库地址下载源码:https://gitee.com/mengshukeji/Luckysheet
2.具体安装和运行请参照luckysheet的说明
3.打开/src/global/api.js,在api.js中添加以下代码增加支持获取图片的api:
/**
* 获取当前屏幕dpi
* @returns dpi
*/
function getDPI() {
var tempDiv = document.createElement("div");
tempDiv.style.width = "1in";
tempDiv.style.visibility = "hidden";
document.body.appendChild(tempDiv);
var dpi = tempDiv.offsetWidth;
document.body.removeChild(tempDiv);
return dpi;
}
/**
* 毫米转像素
* @param {int} mm 毫米
* @param {int} dpi dpi
* @returns
*/
function mmToPixel(mm, dpi) {
// 1 inch = 25.4 mm
var inches = mm / 25.4;
var pixels = inches * dpi;
return Math.round(pixels);
}
function calculateA4PaperSize() {
var dpi = getDPI();
var width_mm = 210; // A4纸宽度,单位:毫米
var height_mm = 297; // A4纸高度,单位:毫米
var width_px = mmToPixel(width_mm, dpi);
var height_px = mmToPixel(height_mm, dpi);
return { width: width_px, height: height_px };
}
/**
* 将选中区域进行截图,截图完成后调用指定委托函数,(修复支持插入的图片及图表截图):ALAN-JI
* @param {Object} options 可选参数
* @param {Object | String} options.range 选区范围,只能为单个选区;默认为当前选区
* @param {function} action 委托执行函数,当所有绘图完成后,执行此委托函数(委托函数中可用于触发图片打印,或图片显示)
*/
export function getScreenshotWithImg(action, options = {}) {
let {
range = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1],
} = { ...options }
if (getObjType(range) == 'string') {
if (!formula.iscelldata(range)) {
return tooltip.info("The range parameter is invalid.", "");
}
let cellrange = formula.getcellrange(range);
range = {
"row": cellrange.row,
"column": cellrange.column
};
}
if (getObjType(range) != 'object' || range.row == null || range.column == null) {
return tooltip.info("The range parameter is invalid.", "");
}
let str = range.row[0],
edr = range.row[1],
stc = range.column[0],
edc = range.column[1];
let has_PartMC = hasPartMC(Store.config, str, edr, stc, edc);
if (has_PartMC) {
return tooltip.info('Cannot perform this operation on partially merged cells', '');
}
let visibledatarow = Store.visibledatarow;
let visibledatacolumn = Store.visibledatacolumn;
let scrollHeight, rh_height;
if (str - 1 < 0) {
scrollHeight = 0;
rh_height = visibledatarow[edr];
}
else {
scrollHeight = visibledatarow[str - 1];
rh_height = visibledatarow[edr] - visibledatarow[str - 1];
}
//根据当前分辨率计算出A4纸宽度,高度(高度不用限制,默认会自动分页)
let a4Size=calculateA4PaperSize();
let scrollWidth, ch_width=a4Size.width;
if (stc - 1 < 0) {
scrollWidth = 0;
ch_width = visibledatacolumn[edc]<a4Size.width ? visibledatacolumn[edc]:a4Size.width;
}
else {
scrollWidth = visibledatacolumn[stc - 1];
ch_width = visibledatacolumn[edc] - visibledatacolumn[stc - 1]<a4Size.width ? visibledatacolumn[edc] - visibledatacolumn[stc - 1]:a4Size.width;
}
let newCanvas = $("<canvas>").attr({
width: Math.ceil(ch_width * Store.devicePixelRatio),
height: Math.ceil(rh_height * Store.devicePixelRatio)
}).css({ width: ch_width, height: rh_height });
luckysheetDrawMain(scrollWidth, scrollHeight, ch_width, rh_height, 1, 1, null, null, newCanvas);
let ctx_newCanvas = newCanvas.get(0).getContext("2d");
//补上 左边框和上边框
ctx_newCanvas.beginPath();
ctx_newCanvas.moveTo(
0,
0
);
ctx_newCanvas.lineTo(
0,
Store.devicePixelRatio * rh_height
);
ctx_newCanvas.lineWidth = Store.devicePixelRatio * 2;
ctx_newCanvas.strokeStyle = luckysheetdefaultstyle.strokeStyle;
ctx_newCanvas.stroke();
ctx_newCanvas.closePath();
ctx_newCanvas.beginPath();
ctx_newCanvas.moveTo(
0,
0
);
ctx_newCanvas.lineTo(
Store.devicePixelRatio * ch_width,
0
);
ctx_newCanvas.lineWidth = Store.devicePixelRatio * 2;
ctx_newCanvas.strokeStyle = luckysheetdefaultstyle.strokeStyle;
ctx_newCanvas.stroke();
ctx_newCanvas.closePath();
//获取插入图片的元素,并在canvas上进行绘制
if ($('#luckysheet-image-showBoxs')) {
var imgs = $('#luckysheet-image-showBoxs img');
imgs.each(function (i) {
var parent = $(this).parent().parent();
var left = parent.css("left").replace('px', '');
var top = parent.css("top").replace('px', '');
var width = parent.css("width").replace('px', '');
var height = parent.css("height").replace('px', '');
var img = new Image()
img.src = $(this).attr("src");
ctx_newCanvas.drawImage(img, left, top, width, height);
});
}
//获取统计图元素,并在canvas上进行绘制
let targetDoms = document.querySelectorAll('.luckysheet-modal-dialog.luckysheet-modal-dialog-chart.luckysheet-data-visualization-chart');
var chartCount = 0;
if (targetDoms && targetDoms.length > 0)
{
repaintChartScreenshot(newCanvas,ctx_newCanvas,targetDoms,action,0,targetDoms.length);
}
if (!targetDoms || targetDoms.length == 0) {
if (action) {
action(newCanvas.get(0).toDataURL("image/png", 1));
}
}
}
/**
* 递归获取所有统计图,并重绘chart到截屏图上:ALAN-JI
* @param {object} newCanvas canvas画布元素对象
* @param {object} ctx_newCanvas 当前画布用于绘制新图的对象
* @param {NodeListOf} targetDoms 所有统计图Nodes集合
* @param {function} action 委托函数,当所有绘图完成后,执行此委托函数(委托函数中可用于触发图片打印,或图片显示)
* @param {int} index 当前统计图下标
* @param {int} length 统计图总集合长度
*/
export function repaintChartScreenshot(newCanvas,ctx_newCanvas,targetDoms,action,index,length) {
let targetDom = targetDoms[index];
var left = targetDom.style.left.replace('px', '');
var top = targetDom.style.top.replace('px', '');
var width = targetDom.style.width.replace('px', '');
var height = targetDom.style.height.replace('px', '');
// 此处是实现滚动元素长截图的关键 start
let copyDom = targetDom.cloneNode(true)
copyDom.setAttribute('id', 'copyDom') // 更改id 避免与targetDom id重复
copyDom.style.width = targetDom.scrollWidth + 'px'
copyDom.style.height = targetDom.scrollHeight + 'px'
var chartCanvas = targetDom.getElementsByTagName("canvas")[0];
var canvasToImg = new Image();
canvasToImg.src = chartCanvas.toDataURL('image/png', 1);
canvasToImg.style = chartCanvas.style;
copyDom.innerHTML = copyDom.innerHTML.replace(chartCanvas.outerHTML, canvasToImg.outerHTML)
copyDom.style.zIndex=-50
document.querySelector('body').appendChild(copyDom);
// 此处是实现滚动元素长截图的关键 end
/*
*如不需要长截图,或者要截取的元素无滚动即完全显示。
*下方要截取的元素改为targetDom,并把copyDom相关代码删除即可
*/
// html2canvas截屏,屏幕有滚动条时截图为空
html2canvas(copyDom, {
backgroundColor: "transparent",
allowTaint: true,
useCORS: true,
scale: window.devicePixelRatio * 3,
logging: false,
imageTimeout: 15000,
removeContainer: true,
}).then(canvas => {
var chartImg = new Image()
chartImg.src = canvas.toDataURL('image/png', 1);
document.querySelector('body').removeChild(copyDom)
chartImg.onload = function () {
index++;
ctx_newCanvas.drawImage(chartImg, left, top, width, height);
if (index >= length && action) {
action(newCanvas.get(0).toDataURL("image/png", 1));
}
else
{
//递归调用重绘图片
repaintChartScreenshot(newCanvas,ctx_newCanvas,targetDoms,action,index,length);
}
}
});
}
4.将luckysheet的源码npm run build打包
5.将打包后dist文件夹中的所有文件(index.html除外)复制到自己的项目中
6.如果是vue项目,按照luckysheet官网的本地引入方法,将luckysheet引入到自己的项目中
7.在项目中调用luckysheet.setRangeShow将需要打印的区域选中
8.调用luckysheet.getScreenshotWithImg将得到的图片base64内容插入到print-container的div中
luckysheet.getScreenshotWithImg((imgSrc)=>{
let img = `<img src=${imgSrc} style="max-width: 100%;" />`
this.$nextTick(() => {
document.querySelector("#print-box").innerHTML = img
})
})
9.使用vue-print-nb将div中的内容打印
PS:
本文内容大部分来自https://blog.youkuaiyun.com/alan_ji198573/article/details/128624832,但该文章在添加luckysheet源码部分内容并不齐全,本文的第三种方法是在该文章的基础上补全了代码。
若有侵权请联系删除,同时欢迎各路大神一起交流心得。