1.引入兩個(gè)依賴
npm i html2canvas
npm i jspdf
2.在utils文件夾下新建html2pdf.js文件?
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf'
export const htmlToPDF = async (htmlId, title = "報(bào)表", bgColor = "#fff") => {
? let pdfDom = document.getElementById(htmlId)
? pdfDom.style.padding = '0 10px !important'
? const A4Width = 595.28;
? const A4Height = 841.89;
? let canvas = await html2canvas(pdfDom, {
? ? scale: 2,
? ? useCORS: true,
? ? backgroundColor: bgColor,
? });
? let pageHeight = (canvas.width / A4Width) * A4Height;
? let leftHeight = canvas.height;
? let position = 0;
? let imgWidth = A4Width;
? let imgHeight = (A4Width / canvas.width) * canvas.height;
? /*
? ?根據(jù)自身業(yè)務(wù)需求 ?是否在此處鍵入下方水印代碼
? */
? const ctx = canvas.getContext('2d');
? ctx.textAlign = 'center';
? ctx.textBaseline = 'middle';
? ctx.rotate((20 * Math.PI) / 180);
? ctx.font = '20px Microsoft Yahei';
? ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';
? for (let i = canvas.width * -1; i < canvas.width; i += 240) {
? ? for (let j = canvas.height * -1; j < canvas.height; j += 200) {
? ? ? // 填充文字，x 間距, y 間距
? ? ? ctx.fillText('水印名', i, j);
? ? }
? }
? let pageData = canvas.toDataURL("image/jpeg", 1.0);
? let PDF = new jsPDF("p", 'pt', 'a4');
? if (leftHeight < pageHeight) {
? ? PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
? } else {
? ? while (leftHeight > 0) {
? ? ? PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
? ? ? leftHeight -= pageHeight;
? ? ? position -= A4Height;
? ? ? if (leftHeight > 0) PDF.addPage();
? ? }
? }
? PDF.save(title + ".pdf");
}
3.在目標(biāo)頁(yè)面引入方法即可?
import { htmlToPDF } from '@/utils/html2pdf'
4.使用
<template>
<div class="jsPdf" id="test-id">
<video autoplay width="100%" :controls="false" loop :src="videoUrl" muted></video>
<video autoplay width="100%" :controls="false" loop :src="videoUrl" muted></video>
<video autoplay width="100%" :controls="false" loop :src="videoUrl" muted></video>
<div class="text">
<h1>封神:朝歌風(fēng)云</h1>
<div class="text_p">
<p>《封神》第一部講述了姜子牙、申公豹、元始天尊等一眾神仙，在商王殷壽的妄想和謀劃下，最終聯(lián)合揭露并封印百足天君的故事。在這部電影中，每個(gè)角色都有自己的故事和情感線，鋪陳了復(fù)雜而豐富的劇情，讓觀眾充滿瞬間的懸念和追求真相的驅(qū)動(dòng)力。同時(shí)，電影人物造型精致獨(dú)特，場(chǎng)景布局細(xì)致入微，實(shí)現(xiàn)了東方奇幻風(fēng)格的完美呈現(xiàn)。</p>
<p>《封神第一部：朝歌風(fēng)云》講述了狐貍精蘇妲己的魂魄進(jìn)入王宮，商紂王受其迷惑，殺妻滅子，炮烙諫言的臣子，殘害四方諸侯，建摘星樓。西伯侯姬昌先被囚，后逃回西岐的故事。</p>
<p>狐貍精吸食蘇妲己的魂魄進(jìn)入王宮。商紂王受其迷惑，殺妻滅子，炮烙諫言的臣子，殘害四方諸侯。建摘星樓。西伯侯姬昌先被囚，后逃回西岐。</p>
<p>《封神三部曲》為了還原歷史記載中商王朝氣勢(shì)磅礴的朝歌城，劇組專門(mén)在青島靈山搭建了一座占地800畝土地，總計(jì)3萬(wàn)平米的影棚。外景片場(chǎng)占地五百畝，場(chǎng)地全部依靠劇組自行搭建。圍攏在片場(chǎng)周遭的藍(lán)幕。劇組在片場(chǎng)改裝了數(shù)臺(tái)挖掘機(jī)，去掉挖斗加裝上拍戲用的巨幅藍(lán)幕。挖掘機(jī)本身可自走，底盤(pán)重也扛得住青島當(dāng)?shù)氐暮ｏL(fēng)。如此以來(lái)按照拍攝計(jì)劃移步換景。在內(nèi)景場(chǎng)地中，其中龍德殿占地六千平米，劇組在棚內(nèi)耗費(fèi)5個(gè)月搭建了自己的燈光系統(tǒng)，燈光可以照到任何有需要的區(qū)域。</p>
<p>《封神三部曲》內(nèi)景中的木雕建筑和青銅器擺件頗見(jiàn)劇組的匠心，所有道具是原樣復(fù)刻歷史上商周的器皿，而是劇組參考商周文化元素再度創(chuàng)新制作的。工序是先由畢業(yè)于清華美院、中央美術(shù)學(xué)院等高等藝術(shù)院校的泥雕藝術(shù)家根據(jù)美術(shù)團(tuán)隊(duì)的設(shè)計(jì)稿做出泥雕，再由安徽歙縣和浙江東陽(yáng)的木雕師進(jìn)行1:1大小的木雕打樣，然后進(jìn)行大批量玻璃鋼、發(fā)泡翻制，最終使用貼金的方式，對(duì)雕件進(jìn)行效果處理。影片中版嬰兒雷震子，這個(gè)角色是由機(jī)械控制的，烏爾善導(dǎo)演在該片中引入了一些跨界人才，因?yàn)橹暗碾娪靶袠I(yè)中，能夠把雕塑藝術(shù)、機(jī)械、電腦融合在一起的藝術(shù)家比較稀缺。而設(shè)計(jì)雷震子這個(gè)角色的是一個(gè)小姑娘，學(xué)的專業(yè)是機(jī)械物理，她在雷震子的身體里面裝了很多機(jī)關(guān)，用6個(gè)遙控按鈕來(lái)完成一些操作，睜眼閉眼、哭笑，臉上所有的表情都可以做。雷震子的皮膚觸感就跟真人一樣，摸上去的時(shí)候感覺(jué)就跟摸一個(gè)嬰兒一樣。而長(zhǎng)大之后的雷震子，會(huì)做成一個(gè)虛擬角色，涉及大量特效。洋溢著唯美的詩(shī)意風(fēng)格,滲透著深沉的人文關(guān)懷。整部敘事流暢,沒(méi)有拖泥帶水之感,鏡頭與鏡頭,場(chǎng)景與場(chǎng)景之間銜接的自然靈活，以上就是關(guān)于電影《封神》第一部劇情介紹的全部?jī)?nèi)容了，覺(jué)得不錯(cuò)的話可以繼續(xù)關(guān)注古宮歷史網(wǎng)后續(xù)的精彩內(nèi)容。</p>
</div>
</div>
<el-button type="success" data-html2canvas-ignore="true" @click="btnClick('test-id', '測(cè)試頁(yè)面')">導(dǎo)出(使用html2Canvas + jspdf)</el-button>
</div>
</template>
<script>
import { htmlToPDF } from '@/utils/html2pdf'
export default {
data () {
return {
videoUrl: "/video/26.mp4",
}
},
mounted () { },
methods: {
btnClick (id, title) {
htmlToPDF(id, title)
}
},
}
</script>
<style lang="scss" scoped>
.jsPdf {
width: 100%;
position: relative;
video {
width: 100%;
display: block;
}
.text {
height: 100%;
color: #000;
/* 設(shè)置文字顏色 */
background: #fff;
position: absolute;
inset: 0;
/* 混合模式 */
mix-blend-mode: screen;
text-align: center;
h1 {
font-size: 150px;
font-weight: 600;
margin:100px;
}
.text_p{
width: 80%;
margin: 0 auto;
text-align: left;
p{
font-size: 30px;
text-indent:24px;
line-height: 2;
}
}
}
.el-button {
position: absolute;
top: 20px;
left: 20px;
}
}</style>5.html2Canvas隱藏指定元素?
隱藏指定元素：
data-html2canvas-ignore="true"
<div class="detail" data-html2canvas-ignore="true">
? ? <el-button type="primary" size="small" @click="viewDetail(item)">查看詳情</el-button>
</div>
6.效果?
頁(yè)面效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-603969.html
生成pdf效果
?
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-603969.html
到了這里，關(guān)于vue2如何將頁(yè)面生成 pdf 導(dǎo)出 html2Canvas + jspdf的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
