HTML页面转PDF导出加水印

首先引入

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

 

 html部分：

<div class="printContainer">
  <div ref="printContainer">
     <!-- 内容区域 -->
  </div>
</div>
 
<template slot="footer">
<a-button type="primary" @click="download">下载</a-button>
</template>

先将页面转为pdf：

const title = '工单详情' + moment().format('YYYY-MM-DD')
const el = this.$refs.printContainer
if (el) {
  getPdf(el, title)
}

getPdf.js代码如下

export function getPdf (domRef, title) {
const c = document.createElement('canvas')
const scale = 2.5
const opts = {
   scale: scale,
    useCORS: true, // 允许跨域图片
    allowTaint: true, // 允许跨域图片
    logging: true,
    width: domRef.offsetWidth,
    height: domRef.scrollHeight,
    dpi: window.devicePixelRatio * scale
}
c.width = domRef.offsetWidth * scale
c.height = domRef.scrollHeight * scale
c.getContext('2d').scale(scale, scale)
html2Canvas(domRef, opts).then(function (canvas) {
      // 关闭抗锯齿
      c.mozImageSmoothingEnabled = false
      c.webkitImageSmoothingEnabled = false
      c.msImageSmoothingEnabled = false
c.ImageSmoothingEnabled = false
const pdf = new JsPDF('p', 'mm', 'a4') // A4纸，纵向
const ctx = canvas.getContext('2d')
const a4w = 190
const a4h = 277 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
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)
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距

renderedHeight += imgHeight
if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页
// delete page;
}
pdf.save(`${title}.pdf`)
})
}

添加水印：

const current = moment().format('YYYY-MM-DD')
const text = `${this.userInfo.company_name} ${this.userInfo.name} ${current}`
addWaterMask({ watermark_txt: text, watermark_width: 280, watermark_angle: 30, watermark_fontsize: '16px', watermark_x_space: 50 }, this.$refs.printContainer)

addWaterMask代码如下：

export function addWaterMask (settings, domRef) {
// 此处可以更改自己想要初始化的id。
const ele = domRef
// 默认设置
const defaultSettings = {
watermark_txt: 'text',
watermark_x: 20, // 水印起始位置x轴坐标
watermark_y: 20, // 水印起始位置Y轴坐标
watermark_rows: 20, // 水印行数
watermark_cols: 20, // 水印列数
watermark_x_space: 100, // 水印x轴间隔
watermark_y_space: 50, // 水印y轴间隔
watermark_color: '#aaa', // 水印字体颜色
watermark_alpha: 0.4, // 水印透明度
watermark_fontsize: '15px', // 水印字体大小
watermark_font: '微软雅黑', // 水印字体
watermark_width: 210, // 水印宽度
watermark_height: 80, // 水印长度
watermark_angle: 20 // 水印倾斜度数
}
if (settings) {
const src = settings || {}
for (const key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue
else if (src[key]) defaultSettings[key] = src[key]
}
}
const oTemp = document.createDocumentFragment()
// 获取页面最大宽度
let pageWidth = Math.max(ele.scrollWidth, ele.clientWidth)
const cutWidth = pageWidth * 0.0150
pageWidth = pageWidth - cutWidth
// 获取页面最大高度
const pageHeight = Math.max(ele.scrollHeight, ele.clientHeight)
// 如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols === 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > pageWidth)) {
defaultSettings.watermark_cols = parseInt((pageWidth - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space))
defaultSettings.watermark_x_space = parseInt((pageWidth - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1))
}
// 如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows === 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > pageHeight)) {
defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + pageHeight - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space))
defaultSettings.watermark_y_space = parseInt(((pageHeight - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1))
}
let x
let y
for (let i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
for (let j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
const maskDiv = document.createElement('div')
maskDiv.id = 'maskDiv' + i + j
maskDiv.className = 'maskDiv'
maskDiv.appendChild(document.createTextNode(defaultSettings.watermark_txt))
// 设置水印div倾斜显示
maskDiv.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
maskDiv.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
maskDiv.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
maskDiv.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
maskDiv.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
maskDiv.style.visibility = ''
maskDiv.style.position = 'absolute'
maskDiv.style.left = x + 'px'
maskDiv.style.top = y + 'px'
maskDiv.style.overflow = 'hidden'
maskDiv.style.zIndex = '9999'
// 让水印不遮挡页面的点击事件
maskDiv.style.pointerEvents = 'none'
maskDiv.style.opacity = defaultSettings.watermark_alpha
maskDiv.style.fontSize = defaultSettings.watermark_fontsize
maskDiv.style.fontFamily = defaultSettings.watermark_font
maskDiv.style.color = defaultSettings.watermark_color
maskDiv.style.textAlign = 'center'
maskDiv.style.width = defaultSettings.watermark_width + 'px'
maskDiv.style.height = defaultSettings.watermark_height + 'px'
maskDiv.style.display = 'block'
oTemp.appendChild(maskDiv)
   };
};
ele.appendChild(oTemp)
}

就能实现啦。。。