前端技术使网页生成PDF预览并下载
前端技术使网页生成PDF预览并下载，使用jsPDF、html2Canvas，调用getPdfFun()即可。
import {createApp, reactive, toRefs} from "vue";
import jsPDF from "jspdf";
import html2Canvas from "html2canvas";
setup() {
const state = reactive({
htmlTitle: 'PDF文件名',
Height: document.documentElement.clientHeight - 180,
pdfProgress: 1,
pdfPage: 1,
pdfTotal: null,
type: '01', // 01预览 02下载
pdfContent: { content: '我是内容' },
isDownloaded: false, // 是否生成PDF
isOver: false, // 是否生成完毕
a4Width: 415.28,
// a4Width: 595.28,
a4Height: 841.89,
pdf: null,
canvas: [],
a4HeightRef: 0,
position: 0,
leftHeight: 0,
pageFooter: null,
canvasFooter: null,
pageTitle: null,
canvasTitle: null,
canvasIndex: 0,
pageData: null,
isAddPage: false,
canvas1: null,
list: [],
})
const getPdfFun = () => {
// 初始化PDF
state.pdf = new jsPDF('', 'pt', 'a4')
state.pdf.page = 1
state.pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')
state.isDownloaded = true
if (state.type === '01') {
console.log(state.pdf, 'pdfthis');
getPdf(state.htmlTitle, true)
} else if (state.type === '02') {
getPdf(state.htmlTitle, false)
}
};
const getPdf = async (title, show) => {
// 生成页眉图片
state.canvasTitle = await html2Canvas(document.getElementById('title'))
state.pageTitle = state.canvasTitle.toDataURL('image/jpeg', 1.0)
// 生成内容 6个案件点的图片
const doms = document.getElementsByClassName('casepoint')
console.log(doms, 'doms');
for (let i = 0; i < doms.length; i++) {
if (doms[i]) {
const canvas = await html2Canvas(doms[i], {
allowTaint: true,
scale: 2
})
state.canvas.push(canvas)
}
}
state.canvas1 = document.createElement('canvas')
// 一页pdf显示html页面生成的canvas高度; -300为了每页PDF头部和底部留有空位
state.a4HeightRef = Math.floor(state.canvas[0].width / state.a4Width * state.a4Height)-200;
state.position = 0
addPage()
for (let canvasIndex = 0; canvasIndex < state.canvas.length; canvasIndex++) {
state.position = 0
// 未生成pdf的html页面高度
state.leftHeight = state.canvas[canvasIndex].height
createImpl(state.canvas[canvasIndex])
}
const that = this
// 根据生成的页数，给每一页PDF加上页码
state.isAddPage = true
for (let page = 0; page <= state.pdfProgress; page++) {
state.canvasFooter = await html2Canvas(document.getElementById('footer'))
state.pageFooter = state.canvasFooter.toDataURL('image/jpeg', 1.0)
state.pdf.setPage(page)
if (state.pdfPage < state.pdfProgress) {
state.pdfPage++
}
// 添加页眉
state.pdf.addImage(state.pageTitle, 'JPEG', 90, 40, state.a4Width, (state.a4Width / state.canvasTitle.width * state.canvasTitle.height).toFixed(2) / 1)
// 添加页码
state.pdf.addImage(state.pageFooter, 'JPEG', 90, state.a4Height-40, state.a4Width, (state.a4Width / state.canvasFooter.width * state.canvasFooter.height).toFixed(2) / 1)
}
// 所有内容都生成完毕
if (!show) {
// 直接下载
that.pdf.save(title + '.pdf')
that.isOver = true
} else {
// 在新窗口查看 pdf文件
window.open(that.pdf.output('bloburl'))
that.isOver = true
}
that.init();
};
const createImpl = async (canvas) => {
console.log('这页PDF剩余的高度', state.a4LeftHeight)
console.log('canvas剩余的高度', state.leftHeight)
console.log('canvas开始截取的位置高度', state.position)
if (state.leftHeight > 0) {
if (state.leftHeight > state.a4LeftHeight) {
var checkCount = 0
var i = state.position + state.a4LeftHeight
// 从定好的高度页面，底部开始循环遍历canvas的每个点，找到可以截断的地方
for (i; i >= state.position; i--) {
var count = 0
var isWrite = true
for (var j = 0; j < canvas.width; j++) {
var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
// 如果该单位的颜色不是白色c[0] c[1] c[2] 分别代表r g b 255
if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
count++
}
// 如果这行有连续20个单位都不是白色，退出当前循环
if (count > 20) {
isWrite = false
break
}
}
// 如果有连续10行都是白色的，canvas在这里可以截断了
if (isWrite) {
checkCount++
if (checkCount >= 20) {
break
}
} else {
checkCount = 0
}
}
state.height = i - state.position
if (state.height <= 0) { // 没找到截断点,新增一页PDF
// PDF剩余可用高度
state.a4LeftHeight = (state.a4HeightRef - 150).toFixed(2) / 1
// 先添加一张PDF
state.pdf.addPage()
state.pdfProgress = state.pdfProgress + 1
console.log('新增一页PDF state.pdfProgress', state.pdfProgress)
state.height = state.leftHeight
createImpl(canvas)
return
}
} else {
state.height = state.leftHeight
}
state.canvas1.width = canvas.width
state.canvas1.height = state.height
var ctx = state.canvas1.getContext('2d');
ctx.drawImage(canvas, 0, state.position, canvas.width, state.height, 0, 0, canvas.width, state.height)
console.log('canvas截断的位置', state.position, state.height)
console.log('PDF生成的位置', state.a4HeightRef - state.a4LeftHeight, state.height)
state.list.push(state.canvas1.toDataURL('image/jpeg', 1.0));
state.pdf.addImage(state.canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 90, state.a4Width / state.canvas1.width * (state.a4HeightRef - state.a4LeftHeight)+26, state.a4Width, state.a4Width / state.canvas1.width * state.height)
state.leftHeight -= state.height
state.position += state.height
state.a4LeftHeight -= state.height + 50
if (state.leftHeight > 0) { // 第i个canvas还未截取完毕
await createImpl(canvas)
console.log(5555555555);
}
}
};
const addPage = async () => {
// PDF页面剩余的高度
state.a4LeftHeight = (state.a4HeightRef - 150).toFixed(2) / 1
};
const init = () => {
state.pdf = null;
state.canvas = [];
state.isAddPage = false;
state.pdfProgress = 1;
state.pdfPage = 1;
state.pdfTotal = null;
state.canvas1 = null;
}
return {
...toRefs(state),
getPdfFun,
}
}