首先引入

import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' <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) } 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) }