待续。。。

四、模块分割（html2canvas+jsPDF – 文字会截断，除了让后端做，没找到别的解决办法，感觉后端的插件比前端的更好用…）：

参考链接：https://blog.csdn.net/qq_32244819/article/details/109678481

具体代码：

// 点击下载按钮

document.getElementById("btn").onclick=function(){

outPutPdfFn()

}

// 导出方法

var outPutPdfFn = function() {

const A4_WIDTH = 592.28; // A4纸的宽

const A4_HEIGHT = 841.89; // A4纸的高

console.log('正在导出pdf，请稍候...');

let target = document.getElementById('box'); // 需要打印的页面的dom

let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT; // 根据比例换算一页的高度

// 获取分割的dom，即class类名为splitItem的dom

let splitItemAll = document.getElementsByClassName('splitItem');

// 进行分割操作，当分块的内容超出a4纸的高度，则在这个块之前插入一个空白的块，将原有的块下移进行分割

for (let i = 0; i < splitItemAll.length; i++) {

// 计算当前模块需要分成几部分

let modulesNum = Math.ceil((splitItemAll[i].offsetTop + splitItemAll[i].offsetHeight) / pageHeight);

if (isSplit(splitItemAll, i, modulesNum * pageHeight)) {

let divParent = splitItemAll[i].parentNode; // 获取当前需要分割块的父节点

let newNode = document.createElement('div');

newNode.className = 'emptyDiv';

newNode.style.background = '#ffffff';

// 计算需要插入块的高度

let _H = modulesNum * pageHeight - (splitItemAll[i].offsetTop + splitItemAll[i].offsetHeight);

newNode.style.height = _H + 'px';

newNode.style.width = '100%';

let nextDom = splitItemAll[i].nextSibling; // 获取当前需要分割块的下一个兄弟节点

// 判断兄弟节点是否存在

console.log(nextDom);

if (nextDom) {

// 存在则将新节点插入到下一个兄弟节点的前面

divParent.insertBefore(newNode, nextDom);

} else {

// 不存在则直接添加

divParent.appendChild(newNode);

}

}

}

getPdf('导出pdf', 'box')

}

/**

* 计算当前内容是否跨越了a4大小，以此分割

* @params nodes 拿到的所有需要分割的dom

* @params index 当前需要分割内容的索引

* @params pageHeight A4纸的高度

*/

var isSplit = function(nodes, index, pageHeight) {

// 当前需要分割的内容：内容高度+内容距离页面定位父元素（/body）的高度 < 页面的高度

// 当前需要分割的内容的下一个兄弟节点：内容高度+内容距离页面定位父元素（/body）的高度 > 页面的高度

if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {

return true;

}

return false;

}

// 导出pdf

var getPdf = function(title, dom) {

html2canvas(document.getElementById(dom),{

allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法

backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明

useCORS: true, // 是否尝试使用CORS从服务器加载图像

dpi: 192, // 导出pdf清晰度

scale: window.devicePixelRatio * 3 // 用于渲染的比例。默认为浏览器设备像素比率。增加清晰度

}).then(canvas => {

// html生成图片的数据

var imageData = canvas.toDataURL('image/jpeg', 1.0);

// 原本的html页面的宽高

const canvasWidth = canvas.width;

const canvasHeight = canvas.height;

// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595

var a4Width = 592.28; // A4 宽度

var a4Height = (592.28 / canvasWidth) * canvasHeight; // A4总高度

// 生成pdf的一页显示html的高度

let pageHeight = canvasWidth / 592.28 * 841.89;

// 未生成pdf的html页面高度，最初是整体的高度

let restHeight = canvasHeight;

// 页面上下偏移的大小

var position = 0;

/**

* 参数1：方向：l：横向 p：纵向

* 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"

* 参数3：格式：默认为a4

*/

var pdf = new jsPDF('p', 'pt', 'a4');

// 当内容未超过pdf一页显示的范围，无需分页

if (restHeight < pageHeight) {

/**

* 将图像添加到PDF中

* 参数1：图片的url

* 参数2：图片的格式

* 参数3：图片上下偏移的大小

* 参数4：原始宽度

* 参数5：原始高度

*/

pdf.addImage(imageData, 'JPEG', 0, 0, position, a4Height );

} else {

while(restHeight > 0) {

pdf.addImage(imageData, 'JPEG',0, position, a4Width, a4Height)

restHeight -= pageHeight;

position -= 841.89;

if(restHeight > 0) {

// 在PDF文档中添加新页面

pdf.addPage();

}

}

}

// 保存为pdf格式的文件

pdf.save(`${ title}.pdf`)

})

}

五、echarts图表模糊的解决办法：

// 方法一：初始化echarts的时候，添加清晰度配置 devicePixelRatio

echarts.init(chartDom, null, { devicePixelRatio: window.devicePixelRatio * 3 });

// 方法二：使用svg渲染，这个效果更好，就是需要调整grid，不然图表不完整

// echarts.init(chartDom, null, { renderer: "svg" })