先安装依赖
npm install --save html2canvas
npm install jspdf --save把dom转canvas，屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
components/pdf 创建pdf文件夹
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install: (Vue, options) => {
/**
* targetDom: 需要打印的dom对象
* name:pdf的名字
* callback: 回调函数
*/
Vue.config.globalProperties.$createPdf = (targetDom, name, callback) => {
console.log(window.devicePixelRatio * 4)
// a4纸的尺寸[592.28,841.89]
uni.showLoading({
title: '导出中'
})
const A4_WIDTH = 592.28
const A4_HEIGHT = 841.89
// 每页pdf 相对于A4纸张的页面所对应的高度
let pageHeight = targetDom.scrollWidth / A4_WIDTH * A4_HEIGHT
//将dom对象复制一份出来，我们要对dom对象的大小进行调整，不能影响原页面dom对象的样式
let cloneDom = targetDom.cloneNode(true)
cloneDom.style.width = targetDom.scrollWidth + 'px'
cloneDom.style.background = '#FFFFFF'
// cloneDom.style.display = 'none'
document.body.appendChild(cloneDom)
//这里划重点，将页面中的预计生成一页的div设置一个单独的class，然后根据class获取到所有的节点，即可大致知道将要生成多少页的PDF
let pages = cloneDom.childNodes
//遍历一次这些节点
for (let i = 0; i < pages.length; i++) {
//判断每个页面的节点对象，高度是否大于或小于实际的PDF的高度，如果大于PDF每页的高度，那这个节点最少也要生成2页的PDF，切不能影响下面的节点的，用节点对象的高度/PDF每页的高度，向上取整获取到倍数，然后设置该节点的高度为：PDF每页的高度*倍数，如果节点高度小于PDF每页的高度，直接将该节点高度设置成PDF每页的高度即可
// 有可能pages[i]下没有offsetHeight属性 得判断
if (pages[i].offsetHeight > pageHeight) {
// let num = Math.ceil(pages[i].offsetHeight / pageHeight)
console.log(pages[i].style,'*-*-*-')
// pages[i].style.height = pageHeight * num + 'px'
} else {
// pages[i].style.height = pageHeight + 'px'
}
//页面中每页的div之间有间隔，将这个间隔去掉
// pages[i].style.marginBottom = 0 + 'px'
}
html2canvas(cloneDom, {
scale: 4, // 提升画面质量，但是会增加文件大小
useCORS: true, // 允许跨域图片 当图片是链接地址时，需加该属性，否组无法显示图片
imageTimeout: 0, // 图片加载延迟，默认延迟为0，单位毫秒
height: cloneDom.scrollHeight, // canvas的高度设定，这里的宽高要用复制出来的dom对象的宽高，不能用原dom对象，因为我们已经将dom的高度整体拉高了
width: cloneDom.scrollWidth, // canvas的宽度设定
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
dpi: 172, // 将分辨率提高到特定的DPI
logging: false,
allowTaint: false,
}).then(canvas => {
document.body.removeChild(cloneDom) // 移除节点否者会多出一份
const _this = this;
//未生成pdf的html页面高度
var leftHeight = canvas.height;
var a4Width = 555.28 // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40
var a4Height = 801.89 // 原A4高 841 因为要设置边距 20 ,这里要减掉 40
//一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
//pdf页面偏移
var position = 0;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new JsPDF('x', 'pt', 'a4');
var index = 1,
canvas1 = document.createElement('canvas'),
height;
pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
function createImpl(canvas) {
if (leftHeight > 0) {
index++;
var checkCount = 0;
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef;
for (i = position + a4HeightRef; i >= position; i--) {
var isWrite = true
for (var j = 0; j < canvas.width; j++) {
var 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);
var ctx = canvas1.getContext('2d');
ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width,
height); // 边距这里设置0，不然又黑边
var pageHeight = Math.round(a4Width / canvas.width * height);
// pdf.setPageSize(null, pageHeight)
if (position != 0) {
pdf.addPage();
}
// 设置 20px 边距
pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 20, a4Width, a4Width / canvas1
.width * height);
leftHeight -= height;
position += height;
// $('.pdfProgress').text(index + 1);
// $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
if (leftHeight > 0) {
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 5; j++) {
const left = (j * 120) + 20;
// pdf.addImage(base64,'JPEG', left, i*150, 20, 30); // 关掉水印
}
}
setTimeout(createImpl, 500, canvas);
} else {
pdf.save('下载pdf文件名' + '.pdf');
uni.hideLoading()
}
}
}
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(pageData, 'JPEG', 20, 20, a4Width, a4Width / canvas.width * leftHeight);
pdf.save('下载pdf文件名' + '.pdf')
uni.hideLoading()
} else {
try {
pdf.deletePage(0);
setTimeout(createImpl, 500, canvas);
} catch (err) {
console.log(err);
}
}
})
}
}
}建议使用这一种
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install: (Vue, options) => {
/**
* targetDom: 需要打印的dom对象
* name:pdf的名字
* callback: 回调函数
*/
Vue.config.globalProperties.$createPdf = async(targetDom, name, callback) => {
var shareContent = targetDom;
var width = shareContent.offsetWidth / 4;
var height = shareContent.offsetHeight / 4;
let canvas = await html2canvas(targetDom, { useCORS: true });
var context = canvas.getContext("2d");
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var img = new Image();
img.src = pageData;
// img.onload = () => {
// 获取dom高度、宽度
img.width = img.width / 2;
img.height = img.height / 2;
img.style.transform = "scale(0.5)";
if (width > height) {
// 此可以根据打印的大小进行自动调节
// eslint-disable-next-line
var pdf = new JsPDF("l", "mm", [width * 0.505, height * 0.545]);
} else {
// eslint-disable-next-line
var pdf = new JsPDF("p", "mm", [width * 0.505, height * 0.545]);
}
pdf.addImage(pageData, "jpeg", 0, 0, width * 0.505, height * 0.545);
// pdf.save("名字" + ".pdf");
pdf.save(name + ".pdf");
return false
}
}
}在main文件中引入文章来源：https://www.toymoban.com/news/detail-586252.html
import htmlToPdf from '@/components/pdf/pdf.js'
app.use(htmlToPdf);在需要的页面绑定id 事件文章来源地址https://www.toymoban.com/news/detail-586252.html
import {
getCurrentInstance
} from 'vue';
const {
appContext
} = getCurrentInstance();
// 下载报告
const down = () => {
let target = document.querySelector('#targetDom'); //ID获取节点对象
appContext.config.globalProperties.$createPdf(target, '报告');
}到了这里，关于在uni中使用vue3写h5的pdf导出的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
