我正在尝试使用jsPDF和html2canvas创建pdf。
在台式机上一切正常。我给了html静态宽度和内容,使其适合我的jsPDF抠图。
当我转到手机上尝试使用该功能时,它会切断很多图像。我认为是因为屏幕尺寸大,有人解决此问题吗?
我只需要html2canvas切口与桌面上的完全相同。
这是我的html2canvas和jsPDF:
capture () {
var capture = document.getElementById('capture')
capture.style.display = 'none;'
var image = document.getElementById('canvas')
html2canvas(image).then(function (canvas) {
var pdf = new JsPDF('p', 'pt', 'a4')
for (var i = 0; i <= image.clientHeight / 980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas
var sX = 0
var sY = 1120 * i // start 980 pixels down for every new page
var sWidth = 830
var sHeight = 1120
var dX = 0
var dY = 0
var dWidth = 830
var dHeight = 1120
var onePageCanvas = document.createElement('canvas')
onePageCanvas.setAttribute('width', 830)
onePageCanvas.setAttribute('height', 1120)
var ctx = onePageCanvas.getContext('2d')
// details on this usage of this function:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight)
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL('image/png', 1.0)
var width = onePageCanvas.width
var height = onePageCanvas.clientHeight
// ! If we're on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(595, 842) // 8.5" x 11" in pts (in*72)
}
// ! now we declare that we're working on that page
pdf.setPage(i + 1)
// ! now we add content to that page!
pdf.addImage(canvasDataURL, 'PNG', 0, 0, (width * 0.72), (height * 0.71))
}
pdf.deletePage(5)
pdf.save('Wehappy-monthlyReport.pdf')
})
}
先谢谢您 -安德斯