【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样-Toy模板网

这篇具有很好参考价值的文章主要介绍了【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样，在mac下，一切正常，看起来很舒服，但是当我把页面放在扩展屏幕下（27寸），再生成一个pdf，虽然排版一样，但是文字就变得非常小
【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样,pdf,前端,javascript

下面的是在mac下的，上面是在扩展屏幕下的，最开始我以为是文字大小问题，我是一直在扩展屏幕上进行测试的，但我把页面拖拽回mac上时，我发现生成的pdf是正常的，这时我就猜测应该不是文字大小的问题

尝试：将canvas打印出来

const pdfContent = document.querySelector('.pdf-content')
html2canvas(pdfContent).then((canvas) => {
	console.log(canvas)
})

打印结果就是 canvas的 height 和 width在不同屏幕上时不一样的，这个时候我设置了html2canvas的属性

html2canvas(pdfContent, {
	width: 1407,
	height: 936
}).then((canvas) => {
	console.log(canvas)
})

数据具体怎么来的下面再说，然后打印预览发现
【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样,pdf,前端,javascript
图片没有撑满，还是不对
真正影响截取的图片宽高的时 Window.innerWidth 这个属性
这个属性可以通过 ownerDocument.defaultView.innerHeight来获取，当我们打印出来 ownerDocument.defaultView这个属性，发现里面有 innerHeight 和 innerWidth 这两个属性，在mac上打印预览正常下的这两个属性值宽为1407 高为936，那就将这两个属性写死，就可以保证在所有屏幕下渲染出来的图片都是一致的

完整代码

const generatePDF = () => {
	if (haveData.value == true) {
		const pdfContent = document.querySelector('.pdf-content')
		console.log(pdfContent.ownerDocument.defaultView)
		pdfContent.ownerDocument.defaultView.innerHeight = 936 
		pdfContent.ownerDocument.defaultView.innerWidth = 1407
		pdfContent.ownerDocument.defaultView.devicePixelRatio = 2
		html2canvas(pdfContent).then((canvas) => {
			console.log(canvas)
			const imgData = canvas.toDataURL('image/png', 1.0)
			const pdf = new jsPDF('p', 'mm', 'a4')
			const a4w = 190; const a4h = 277
			pdf.addImage(imgData, 'PNG', 10, 10, a4w, Math.min(a4h, a4w * canvas.height / canvas.width))
			pdf.setFontSize(20)
			pdf.save(`${valueMonth.value}月报.pdf`)
		})
	} else {
		message.warning('本月暂无数据可导出')
	}
}