Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向
使用 Vue 实现导出 PDF 文件并添加水印，同时支持设置水印样式、方向和自定义水印内容。
步骤
- 安装依赖：使用
html2canvas将 HTML 内容转换为 canvas，使用jspdf生成 PDF 文件。 - 创建 Vue 组件：在组件中实现水印生成、HTML 转 canvas、canvas 转 PDF 的功能。
- 设置水印样式和方向：支持自定义水印内容、字体、颜色、透明度、旋转角度等。
- 导出 PDF 文件：将带有水印的 HTML 内容导出为 PDF 文件。
详细代码及注释
<template><div><!-- 输入水印内容 --><input v-model="watermarkText" placeholder="请输入水印内容" /><!-- 选择水印旋转角度 --><select v-model="watermarkAngle"><option value="0">0°</option><option value="30">30°</option><option value="45">45°</option><option value="60">60°</option><option value="90">90°</option></select><!-- 导出 PDF 按钮 --><button @click="exportPDF">导出 PDF</button><!-- 要导出的内容 --><div id="content" ref="contentRef"><h1>这是要导出的内容</h1><p>这里可以是任意 HTML 内容。</p></div></div>
</template><script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';export default {data() {return {// 水印内容watermarkText: '水印内容',// 水印旋转角度watermarkAngle: '45',};},methods: {// 生成水印 canvasgenerateWatermark() {// 创建一个新的 canvas 元素const canvas = document.createElement('canvas');// 设置 canvas 的宽度和高度canvas.width = 200;canvas.height = 100;// 获取 canvas 的 2D 绘图上下文const ctx = canvas.getContext('2d');// 保存当前的绘图状态ctx.save();// 设置文本对齐方式为居中ctx.textAlign = 'center';// 设置文本垂直对齐方式为中间ctx.textBaseline = 'middle';// 设置字体样式ctx.font = '20px Arial';// 设置文本颜色ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';// 旋转画布ctx.rotate((this.watermarkAngle * Math.PI) / 180);// 在画布上绘制水印文本ctx.fillText(this.watermarkText, canvas.width / 2, canvas.height / 2);// 恢复之前保存的绘图状态ctx.restore();return canvas;},// 导出 PDF 文件async exportPDF() {try {// 生成水印 canvasconst watermarkCanvas = this.generateWatermark();// 将水印 canvas 转换为 base64 格式的图片const watermarkImage = watermarkCanvas.toDataURL('image/png');// 获取要导出的内容元素const content = this.$refs.contentRef;// 使用 html2canvas 将 HTML 内容转换为 canvasconst canvas = await html2canvas(content);// 获取 canvas 的宽度和高度const imgWidth = 210;const pageHeight = 295;const imgHeight = (canvas.height * imgWidth) / canvas.width;let heightLeft = imgHeight;// 创建一个新的 PDF 对象const pdf = new jsPDF('p', 'mm');let position = 0;// 将 canvas 转换为图片并添加到 PDF 中pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);// 添加水印到 PDF 中pdf.addImage(watermarkImage, 'PNG', 50, 100, 100, 50);heightLeft -= pageHeight;// 处理超出一页的内容while (heightLeft >= 0) {position = heightLeft - imgHeight;pdf.addPage();pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);pdf.addImage(watermarkImage, 'PNG', 50, 100, 100, 50);heightLeft -= pageHeight;}// 保存 PDF 文件pdf.save('exported_file.pdf');} catch (error) {console.error('导出 PDF 失败:', error);}},},
};
</script><style scoped>
/* 可以在这里添加样式 */
</style>
使用说明
- 安装依赖：在项目根目录下运行以下命令安装
html2canvas和jspdf：
npm install html2canvas jspdf
- 引入组件：将上述代码保存为一个 Vue 组件文件（例如
ExportPDF.vue），然后在需要使用的地方引入并使用该组件。
<template><div><ExportPDF /></div>
</template><script>
import ExportPDF from './ExportPDF.vue';export default {components: {ExportPDF,},
};
</script>
- 自定义水印内容和样式：
- 在输入框中输入自定义的水印内容。
- 通过下拉框选择水印的旋转角度。
- 导出 PDF 文件：点击“导出 PDF”按钮，即可将带有水印的 HTML 内容导出为 PDF 文件。
注意事项
- 由于
html2canvas和jspdf是基于浏览器环境的库，因此该功能只能在浏览器中使用。 - 导出的 PDF 文件可能会受到浏览器渲染和字体支持的影响，建议在不同浏览器中进行测试。