vue项目页面的打印和下载PDF加loading效果的实现(加水印)

要实现Vue项目页面的打印和下载PDF加loading效果的实现(加水印)，需要按照以下步骤进行：

1. 安装依赖

需要安装以下两个依赖：

• html2canvas：用于将页面截图并转换为canvas。
• jspdf：用于将canvas转成PDF。

可以使用以下命令进行安装：

npm install html2canvas jspdf --save

2. 实现打印功能

使用 html2canvas 将页面截图，然后使用 window.print() 进行打印。这个过程我们可以封装成一个函数：

const print = () => {
  // 获取要截图的容器
  const el = document.getElementById('print')

  // 使用html2canvas将容器截图
  html2canvas(el).then((canvas) => {
    // 将canvas转成图片
    const dataURL = canvas.toDataURL('image/png')

    // 调用系统打印功能
    const printWindow = window.open('', 'PrintWindow')
    printWindow.document.write(`<img src="${dataURL}" />`)
    printWindow.document.close()
    printWindow.print()
    printWindow.close()
  })
}

需要注意的是，html2canvas 实现在一些场景下可能会存在一定的兼容性问题。如果面临一些特定的场景下，可以考虑寻找其他替代方案。

3. 实现PDF下载

和打印功能类似，我们需要使用 html2canvas 将页面截图，然后使用 jspdf 将截图转成 PDF。

实现过程如下：

const downloadPDF = () => {
  // 获取要截图的容器
  const el = document.getElementById('download')

  // 使用html2canvas将容器截图
  html2canvas(el).then((canvas) => {
    // 将canvas转成图片
    const imgData = canvas.toDataURL('image/png')

    // 计算PDF页面大小
    const pageWidth = 210
    const pageHeight = canvas.height * pageWidth / canvas.width

    // 初始化jspdf对象
    const pdf = new jsPDF('p', 'mm', 'a4')

    // 将图片添加到PDF
    pdf.addImage(imgData, 'PNG', 0, 0, pageWidth, pageHeight)

    // 下载PDF
    pdf.save('download.pdf')
  })
}

这个函数中，我们首先获取要下载的容器，然后使用 html2canvas 将容器截图，将截图转成图片。接着，我们计算需要将图片放入的 PDF 页面的大小，然后使用 jspdf 创建 PDF 对象，并将图片放入 PDF。最后，我们调用 pdf.save() 方法下载 PDF。

需要注意的是，html2canvas 处理网页时遇到的第三方库或者CSS3动画/特效等会存在兼容性问题，因此要保证页面的简单、清晰才能减少兼容性问题。

4. 添加Loading效果和水印

在进行页面截图时，如果页面过于复杂，截图和转换会耗费一定的时间。因此，在进行页面截图时，我们可以添加一个 Loading 效果来提示用户正在进行处理。

我们可以在函数开始时显示 Loading，函数结束时隐藏 Loading。

const downloadPDF = () => {
  // 显示loading
  showLoading()

  html2canvas(el).then((canvas) => {
    hideLoading()
    // ...
  })
}

在显示和隐藏 Loading 时，我们可以使用某些第三方库或自己实现。

另外，我们也可以在打印或者下载 PDF 时，添加水印。为了保证页面数据不被非法传播、盗取，我们可以在 PDF 的每一页上添加一个透明的水印。

添加水印的方法如下：

const addWatermark = (pdf, text) => {
  const totalPages = pdf.getNumberOfPages()
  for (let i = 1; i <= totalPages; i++) {
    // 选择当前页
    pdf.setPage(i)

    // 计算水印位置
    const x = pdf.internal.pageSize.getWidth() / 2
    const y = pdf.internal.pageSize.getHeight() / 2
    pdf.setFontSize(100)
    pdf.setTextColor(150, 150, 150, 0.8)
    pdf.setOpacity(0.5)
    pdf.text(text, x, y, null, null, "center", null);
  }
}

在这个函数中，我们首先获取当前 PDF 的总页数，然后循环每一页，计算水印的位置，使用 pdf.text() 添加水印。

将函数封装起来，我们可以这样使用：

const downloadPDF = () => {
  // 显示loading
  showLoading()

  const pdf = new jsPDF('p', 'mm', 'a4')
  const el = document.getElementById('download')

  html2canvas(el).then((canvas) => {
    // 隐藏loading
    hideLoading()

    const imgData = canvas.toDataURL('image/png')

    // 计算PDF页面大小
    const pageWidth = 210
    const pageHeight = canvas.height * pageWidth / canvas.width

    // 将图片添加到PDF
    pdf.addImage(imgData, 'PNG', 0, 0, pageWidth, pageHeight)

    // 添加水印
    addWatermark(pdf, 'My Watermark')

    // 下载PDF
    pdf.save('download.pdf')
  })
}

在这个函数中，我们首先创建 PDF 对象，然后截图，将截图转成图片，并添加到 PDF 中。我们接着添加水印，最后下载 PDF。

示例1：实现vue项目页面截图下载的demo

<template>
  <div>
    <button @click="downloadPDF">下载PDF</button>
    <div id="download">
      <!-- 需要截图下载的内容 -->
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default {
  methods: {
    downloadPDF() {
      // 显示loading
      showLoading()

      const pdf = new jsPDF('p', 'mm', 'a4')
      const el = document.getElementById('download')

      html2canvas(el).then((canvas) => {
        hideLoading()

        const imgData = canvas.toDataURL('image/png')

        // 计算PDF页面大小
        const pageWidth = 210
        const pageHeight = canvas.height * pageWidth / canvas.width

        // 将图片添加到PDF
        pdf.addImage(imgData, 'PNG', 0, 0, pageWidth, pageHeight)

        // 添加水印
        addWatermark(pdf, 'My Watermark')

        // 下载PDF
        pdf.save('download.pdf')
      })
    }
  }
}
</script>

示例2：实现vue项目页面打印的demo

<template>
  <div>
    <button @click="print">打印</button>
    <div id="print">
      <!-- 需要打印的内容 -->
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
  methods: {
    print() {
      const el = document.getElementById('print')

      html2canvas(el).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')

        const printWindow = window.open('', '')
        printWindow.document.write(`<img src="${dataURL}" />`)
        printWindow.document.close()
        printWindow.print()
        printWindow.close()
      })
    }
  }
}
</script>