html2canvas+jspdf实现下载pdf并添加水印

点击查看代码

import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
    Vue.prototype.$ExportSavePdf = function(htmlTitle, dom) {
      const element = document.getElementById(dom)
      html2canvas(element, {
        logging: false,
        scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
        allowTaint: true // 允许跨域图片
      }).then(function async(canvas) {
        const imagewater = new Image()
        imagewater.src = '/api/storageFile/fdfs/downloadFile?fileName=d9c0ff0b932eddde0a48840f22d69219.jpeg&filePath=group1/M00/00/87/cvHE5mRd492AOJ16AADjGYQNxvI25.jpeg'
        imagewater.onload = function() {
          const pdf = new JSPDF('p', 'mm', 'a4') // A4纸，纵向
          const ctx = canvas.getContext('2d')
          ctx.globalAlpha = 0.3 // 设置透明度
          // let a4w = 170; let a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
          const a4w = 190
          const a4h = 297 // 修改后
          const imgHeight = Math.floor((a4h * canvas.width) / a4w) // 按A4显示比例换算一页图像的像素高度
          let renderedHeight = 0
          while (renderedHeight < canvas.height) {
            const page = document.createElement('canvas')
            page.width = canvas.width
            page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
            // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
            page
              .getContext('2d')
              .putImageData(
                ctx.getImageData(
                  0,
                  renderedHeight,
                  canvas.width,
                  Math.min(imgHeight, canvas.height - renderedHeight)
                ),
                0,
                0
              )
            // row == 暂时为3
            // const yn = Math.floor(page.height / 4)
            // console.log('page', page.width, page.height)
            // for (let vms = 1; vms < 3; vms++) {
            //   const xn = Math.floor(page.width / 4) * (2 * vms - 1)
            //   page.getContext('2d')
            //     .drawImage(
            //       image, xn, yn, 103, 103
            //     )
            //   page.getContext('2d')
            //     .drawImage(
            //       image, xn, yn * 2 + 60, 103, 103
            //     )
            // }
            pdf.addImage(
              page.toDataURL('image/jpeg', 1.0),
              'JPEG',
              10,
              10,
              a4w,
              Math.min(a4h, (a4w * page.height) / page.width)
            ) // 添加图像到页面，保留10mm边距
            console.log('page', page.width, page.height)
            // 水印canvas
            const waterCanvas = document.createElement('canvas')
            waterCanvas.width = 103
            waterCanvas.height = 103
            const waterCtx = waterCanvas.getContext('2d')
            waterCtx.globalAlpha = 0.4
            const yn = Math.floor(a4h / 8)
            console.log('a4', a4w, a4h)
            for (let vms = 1; vms < 3; vms++) {
              const xn = Math.floor(a4w / 4) * (2 * vms - 1) - 10
              waterCtx.drawImage(imagewater, 0, 0, 103, 103)
              pdf.addImage(
                waterCanvas.toDataURL('image/png', 1.0),
                'PNG',
                xn,
                yn,
                a4w / 4,
                a4h / 6,
                'NONE'
              ) // 添加图像到页面，保留10mm边距
              pdf.addImage(
                waterCanvas.toDataURL('image/png', 1.0),
                'PNG',
                xn,
                yn + 180,
                a4w / 4,
                a4h / 6,
                'NONE'
              ) // 添加图像到页面，保留10mm边距
            }
            pdf.addImage(
              waterCanvas.toDataURL('image/png', 1.0),
              'PNG',
              Math.floor(a4w / 2) - Math.floor(a4w / 8),
              Math.floor(a4h / 2) - Math.floor(a4h / 8),
              Math.floor(a4w / 4),
              Math.floor(a4h / 6),
              'NONE'
            ) // 添加图像到页面，保留10mm边距
            renderedHeight += imgHeight
            if (renderedHeight < canvas.height) {
              pdf.addPage()
            } // 如果后面还有内容，添加一个空页
          // delete page;
          }
          pdf.save(htmlTitle)
        }
      })
    }