[無題] html2canvas と jspdf を使用して生成された PDF のテキスト サイズは、画面サイズが異なると異なります

問題: html2canvas と jspdf を使用して生成された PDF のテキスト サイズは、画面サイズが異なると異なります。Mac ではすべて正常で非常に快適に見えますが、ページを拡張画面 (27 インチ) の下に置き、生成すると別の


PDF、タイプセットは同じですが、テキストが非常に小さくなりますページを Mac にドラッグして戻すと、生成された PDF は正常であることがわかりました。この時点では、テキスト サイズの問題ではないと推測しました。

試してみましょう: キャンバスを印刷します

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

印刷結果は画面によってキャンバスの高さと幅が異なりますが、このときhtml2canvasのプロパティを設定しました。

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

データの取得方法について話しましょう。その後、印刷プレビューで

画像がいっぱいではない、または正しくないことがわかりまし
た。キャプチャされた画像の幅と高さに実際に影響を与える場合、属性 Window.innerWidth は
ownerDocument を通じて取得できます。 .defaultView.innerHeight. ownerDocument を印刷すると、.defaultView プロパティには、innerHeight と innerWidth という 2 つのプロパティがあることがわかりました。Mac の通常の印刷プレビューでは、これら 2 つのプロパティの幅は 1407、高さは 936 です。次に、これら 2 つを書きます。すべての画面でレンダリングされた画像が一貫していることを確認できます。

完全なコード

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('本月暂无数据可导出')
	}
}

このようにして、どの画面でも同じサイズ、同じ文字サイズの PDF を取得できます。