javascript至pdf,响应式截断文档

时间:2018-10-23 10:21:54

标签: javascript responsive jspdf html2canvas

我正在尝试使用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')
      })
    }

先谢谢您 -安德斯

0 个答案:

没有答案