vue中打印页面部分内容

最新推荐文章于 2024-10-11 16:14:42 发布

langzitianya

最新推荐文章于 2024-10-11 16:14:42 发布

阅读量549

点赞数 4

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/langzitianya/article/details/137116049

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章介绍了如何在JavaScript中利用html2canvas库将DOM内容转换为canvas，以便于根据windowWidth（如1200px）和scale（如2倍）进行高清晰度打印。同时借助printjs库实现了自定义页眉标题和Base64打印功能。

摘要由CSDN通过智能技术生成

scale:2 可以增加打印内容的清晰度

windowWidth: 1200可以根据实际内容调整

    printPaper() {
      this.printing = true
      this.$nextTick(() => {
        html2canvas(this.$refs.printPaperRef, {
          useCORS: true,
          foreignObjectRendering: false,
          windowWidth: 1200,
          //windowWidth: document.body.scrollWidth,
          //windowHeight: document.body.scrollHeight,
          scale: 2
        }).then((canvas) => {
          const url = canvas.toDataURL()
          printjs({
            printable: url,
            type: 'image',
            documentTitle: "这是页眉的标题",
            base64: 'true'
          })
        }).finally(() => {
          this.printing = false
        })
      })
    }