1. js 保存页面html2canvas+jsPDF

  • 浏览器控制台测试 兼容IE
var uri1 =
  'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js'
var uri2 = 'https://linwalker.github.io/render-html-to-pdf/js/html2canvas.js'
var uri3 = 'https://linwalker.github.io/render-html-to-pdf/js/jsPdf.debug.js'

var loadScript = function (url, callback) {
  var script = document.createElement('script')
  script.type = 'text/javascript'
  if (script.readyState) {
    // IE
    script.onreadystatechange = function () {
      if (script.readyState == 'loaded' || script.readyState == 'complete') {
        script.onreadystatechange = null
        callback()
      }
    }
  } else {
    // Others
    script.onload = function () {
      callback()
    }
  }
  script.src = url
  document.getElementsByTagName('head')[0].appendChild(script)
}
loadScript(uri1, function () {
  loadScript(uri2, function () {
    loadScript(uri3, function () {
      setTimeout(function () {
        var test = function () {
          html2canvas(document.body, {
            onrendered: function (canvas) {
              //返回图片dataURL,参数:图片格式和清晰度(0-1)
              var pageData = canvas.toDataURL('image/jpeg', 1.0)

              //方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
              var pdf = new jsPDF('', 'pt', 'a4')

              //addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
              pdf.addImage(
                pageData,
                'JPEG',
                0,
                0,
                595.28,
                (592.28 / canvas.width) * canvas.height
              )

              pdf.save('stone.pdf')
            },
          })
        }
        test()
      }, 2000)
    })
  })
})

results matching ""

    No results matching ""