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)
}

就能實現啦。。。