html2canvas在前端生成图片、Print插件实现页面打印

html2canvas在前端生成图片

https://www.hangge.com/blog/cache/detail_2211.html 

 

 

Vue使用Print插件实现页面打印  

https://blog.csdn.net/weixin_44255044/article/details/114871553

 

 

 toImg () { // 转图片打印
      this.printerLoading = true
        const targetDom = document.querySelector("#formContent")
        // const copyDom = targetDom.cloneNode(true)
        // copyDom.style.width = targetDom.scrollWidth + 'px'
        // copyDom.style.height = targetDom.scrollHeight + 'px'
        // document.body.appendChild(copyDom)
        html2canvas(this.$refs.formContent, {
          backgroundColor: null,
          useCORS: true,
          height: targetDom.scrollHeight,
          width: targetDom.scrollWidth
        }).then((canvas) => {
          // let url = canvas.toDataURL('image/jpeg', 1.0)
          const url = canvas.toDataURL()
          this.img = url
          printJS({
            printable: url,
            type: 'image',
            documentTitle: '打印图片',
            onLoadingStart: this.onLoadingStart(),
            onLoadingEnd:this.onLoadingEnd()
          })
        })
      },

初次了解和使用学习，参考大佬文章，暂存，以后深入学习