admin管理员组文章数量:1592253
原理:富文本转pdf其实就是将txt文本插入html元素中,再将使用html2Canvas画布生成图片,最后在使用jspdf插件将图片转为pdf文件
遇到问题:会出现黑色背景以及分页时文字会被截断
1、需要安装三个依赖
npm install wangeditor --save
npm install jspdf --save
npm install html2canvas --save
2、vue文件使用编辑器
<template>
<div>
<!-- 编辑器 -->
<div ref="domRef" class="bg-white dark:bg-dark z-1"></div>
<!-- 下载 -->
<n-button type="info" @click="savaBtnSubmit()">下载</n-button>
<!-- pdf文本 -->
<div id="pdfDom" style="padding: 0 20px; width: 847px" class="absolute -top-999px"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import WangEditor from 'wangeditor'; // 编辑器插件
import { getPdf } from '@/utils';
const content = ref();
const editor = ref();
const domRef = ref();
// 创建编辑器实例
function renderWangEditor() {
editor.value = new WangEditor(domRef.value);
// 监听内容变化事件
editor.value.config.onchange = newHtml => {
content.value = newHtml; // newHtml 等同于 editor.value.txt.html();
};
editor.value.create();
}
// 下载
async function savaBtnSubmit() {
getPdf('文档名称', content.value);
}
onMounted(() => {
renderWangEditor();
});
</script>
补充:如果只需要将html转为pdf,只需要下方代码
<div id="pdfDom" style="padding: 0 20px; width: 847px"></div>
<n-button type="info" @click="savaBtnSubmit()">下载</n-button>
function savaBtnSubmit() {
getPdf('文档名称');
}
3、新建htmlToPdf.js文件,
import html2Canvas from 'html2canvas'
import jsPDF from 'jspdf'
export function getPdf(title, htmlString) {
let douTxt = document.querySelector('#pdfDom') // 获取元素
douTxt.innerHTML = htmlString // 元素插入富文本内容
html2Canvas(douTxt, {
allowTaint: true,
// taintTest: false,
logging: false,
useCORS: true,
// dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4, //按比例增加分辨率
}).then((canvas) => {
// 未生成pdf的html页面高度
let leftHeight = canvas.height
let a4Width = 595.28 //
let a4Height = 841.89 //A4大小进行像素转换 一页pdf显示html页面生成的canvas高度
let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height) //pdf页面偏移
let position = 0
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let pdf = new jsPDF('p', 'pt', 'a4') // A4纸,纵向
let index = 1,
canvas1 = document.createElement('canvas'),
height
pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')
function createImpl(canvas) {
if (leftHeight > 0) {
index += 1
let checkCount = 0
if (leftHeight > a4HeightRef) {
let i = position + a4HeightRef
for (i = position + a4HeightRef; i >= position; i--) {
let isWrite = true
for (let j = 0; j < canvas.width; j++) {
let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
isWrite = false
break
}
}
if (isWrite) {
checkCount++
if (checkCount >= 10) {
break
}
} else {
checkCount = 0
}
}
height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
if (height <= 0) {
height = a4HeightRef
}
} else {
height = leftHeight
}
canvas1.width = canvas.width
canvas1.height = height
console.log(index, 'height:', height, 'pos', position)
let ctx: any = canvas1.getContext('2d')
ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height)
// let pageHeight = Math.round((a4Width / canvas.width) * height) // pdf.setPageSize(null, pageHeight)
if (position != 0) {
pdf.addPage()
}
pdf.addImage(
canvas1.toDataURL('image/jpeg', 1.0),
'JPEG',
0, // 距左方0
0, // 距上方0
a4Width,
(a4Width / canvas1.width) * height
)
leftHeight -= height
position += height
if (leftHeight > 0) {
setTimeout(createImpl, 500, canvas)
} else {
pdf.save(title + '.pdf')
}
}
} //当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, (a4Width / canvas.width) * leftHeight)
pdf.save(title + '.pdf')
} else {
try {
pdf.deletePage(0)
setTimeout(createImpl, 500, canvas)
} catch (err) {
// console.log(err);
}
}
})
}
补充:如果只需要将html元素转为pdf,该文件修改这两行代码
getPdf(title, htmlString) 函数传入的值改为getPdf(title)
douTxt.innerHTML = htmlString // 元素插入富文本内容
4、最终实现效果
版权声明:本文标题:vue3 富文本编辑器文本转pdf文件并下载 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728138460a1147047.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论