关于window.print打印问题

Question

请问哪位同行遇见过，js打印，window.print弹出新页面打印，使用document.write赋值，其中包含富文本框，里面有图片img,直接是图片地址，为什么第一次点击打印按钮，图片是空白;刷新打印弹出页，第二次点击打印按钮图片又好了，不知有什么处理方案，望各位指点一二，谢谢！

Answer 1

试一下

function printCanvas (id, i) {
  var oldstr = document.body.innerHTML // 获取当前页面内容用以还原
  var div_print = document.getElementById(id) // 获取要打印部分的内容
  var cv = document.getElementsByTagName('canvas')[i] //获取canvas
  var resImg = document.getElementById(id) //获取包裹canvas的标签
  // 将canvas转为图片
  // var context = cv.getContext("2d")
  var img = new Image()
  var strDataURI = cv.toDataURL('image/png')
  img.src = strDataURI
  // 图片加载完成之后
  img.onload = function () {
    // 执行打印
    setTimeout(function () {
      resImg.innerHTML = `<img src="${strDataURI}" style=height:400px>` // 用图片替代canvas
      var newstr = div_print.innerHTML
      // newstr.style.height = '50vh'
      document.body.innerHTML = newstr // 将页面内容改为修改后的内容
      window.print() // 打印
      window.location.reload() // 重新加载页面
      document.body.innerHTML = oldstr // 将页面内容还原
    }, 1000)
  }
}