记录最近遇到的问题：html2canvas+jspdf的使用~

前言

在前端开发中，有时我们需要将页面内容导出为PDF文件。这可以通过一些JavaScript库来实现，如html2canvas和jsPDF。本文将介绍如何使用这两个库来实现前端页面导出PDF的功能。在查找资料时网上的文章都提到这种方案存在一些缺点，如清晰度问题、分页文字被截断问题、背景黑色，所以在使用时根据需要去选择合适的方案。使用下来个人感觉这种方案基本能满足大部分的使用场景，如果你有幸读到这篇文章，希望能对你有所帮助！

1.首先，引入或安装html2canvas和jsPDF。

官网地址： github.com/niklasvh/ht…

github.com/parallax/js…

2.基本使用

因为我维护的项目是老项目，所以在使用上直接操作dom，不过使用的思路都是依葫芦画瓢的。在处理分页问题上，我使用自定义高度的方式，直接把所有内容打印在一页上，但是这种适合打印的内容相对较少，如果你的项目需求是需要分页，可以把格式改为使用A4的格式，但是随之而来的坑太多，使用起来很繁琐。那本文就不太适合您，请移步去找其他的解决方法，不浪费您的宝贵时间。

//使用html2canvas和jspdf实现打印为PDF
document.getElementById("savePdfButton").addEventListener("click", function (data) {
	//打印时隐藏打印按钮
	$("#savePdfButton").hide()
	//将文档的滚动位置重置为页面顶部，确保捕获整个页面内容。
	document.documentElement.scrollTop = 0
    // 生成canvas上下文
    let canvas = document.createElement("canvas")
    let context = canvas.getContext("2d")
    //获取需要导出的dom元素
    let element = document.getElementById('report_box')
    //获取需要导出pdf区域的宽度和高度
    var w = element.offsetWidth // 获得该容器的宽
    var h = element.offsetHeight // 获得该容器的高
    //将画布宽&&高放大三倍，提高清晰度
    let scale = 5
    if (w > h) {
    	h = w
    }
    canvas.width = w * scale
    canvas.height = h * scale
    context.scale(scale, scale)
    let opts = {
        scale: 2,
        width: w,
        height: h,
        useCORS: true,  //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
        //设置背景颜色，避免出现黑色背景
        background: "#69B0AC"
    }
    // 动态调整元素大小以填满整个PDF页面，不然在打印时会出现黑色背景
    element.style.width = w + 'px';
    element.style.height = h + 'px';

    html2canvas(element, opts).then(function (canvas) {
    let contentWidth = canvas.width / scale
    let contentHeight = canvas.height / scale
    //自定义宽高
    let pdf = new jsPDF('', 'mm', [contentWidth, contentHeight])
    //转换图片为dataURL
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    //添加图像到页面
    // addImage(pageData, 'JPEG', 左，上，宽度，高度)
    pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
    // 还原元素的原始大小
    element.style.width = 'auto';
    element.style.height = 'auto';
    //保存PDF
    pdf.save(data.userName + data.scaleName + '.pdf')
    // 显示按钮
    $("#savePdfButton").show()
    });
});        

总结

本文知识点较少，刚开始学习写博客，没有什么经验，不好的地方希望能给些建议~