效果
文章來源：http://www.zghlxwxcb.cn/news/detail-681925.html
預(yù)期效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-681925.html
//避免分頁被截斷
async outPutPdfFn (id, title) {
const _t = this;
const A4_WIDTH = 592.28;
const A4_HEIGHT = 841.89;
// dom的id。
let target = document.getElementById('pdf');
let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT;
// 獲取分割dom，此處為class類名為item的dom
let lableListID = document.getElementsByClassName('item');
// 進行分割操作，當(dāng)dom內(nèi)容已超出a4的高度，則將該dom前插入一個空dom，把他擠下去，分割
for (let i = 0; i < lableListID.length; i++) {
const currentItem = lableListID[i];
let elToTop = document.getElementById('title').offsetTop + currentItem.offsetTop
if (elToTop + currentItem.offsetHeight > pageHeight && elToTop < pageHeight) {
let divParent = currentItem.parentNode; // 獲取該div的父節(jié)點
let newNode = document.createElement('div');
newNode.className = 'emptyDiv';
newNode.style.height = 8 + 'px';
newNode.style.width = '100%';
divParent.insertBefore(newNode, currentItem);
}
}
await _t.$nextTick();
_t.getPdf({
id,
title,
backgroundColor: '#fff'
}).then(base64 => {
uni.postMessage({
data: {
pb: base64,
name: title
}
})
_t.navigateBack();
})
},
到了這里，關(guān)于vue頁面轉(zhuǎn)pdf后分頁時文字被橫向割裂的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
