時間：2023-05-27 04:45:01 | 來源：網(wǎng)站運營
時間：2023-05-27 04:45:01 來源：網(wǎng)站運營
前端技術(shù)使網(wǎng)頁生成PDF預(yù)覽并下載：前端技術(shù)使網(wǎng)頁生成PDF預(yù)覽并下載，使用
在線咨詢
jsPDF、html2Canvas，調(diào)用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預(yù)覽 02下載 pdfContent: { content: '我是內(nèi)容' }, 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) // 生成內(nèi)容 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 // 根據(jù)生成的頁數(shù)，給每一頁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) } // 所有內(nèi)容都生成完畢 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 // 從定好的高度頁面，底部開始循環(huán)遍歷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++ } // 如果這行有連續(xù)20個單位都不是白色，退出當(dāng)前循環(huán) if (count > 20) { isWrite = false break } } // 如果有連續(xù)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, }}關(guān)鍵詞：技術(shù)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
