1.開發(fā)工具VScode
2.使用框架Taro
3.安裝pdfh5
yarn add pdfh5
4.安裝jspdf
yarn add jspdf
5.安裝 html2canvas
yarn add html2canvas
6.使用
在tsx里面引入
import "pdfh5/css/pdfh5.css"
import {jsPDF} from "jspdf"
import html2canvas from "html2canvas"
創(chuàng)建pdf控件
try {
// 緩存中的pdfUrl
let PDFurl = '你的pdf網(wǎng)址'
if (PDFurl) {
if (process.env.TARO_ENV === 'h5') {
// 因為小程序引入報錯妇押，所以按需加載 npm i pdfh5
let Pdfh5 = require('pdfh5')
//實例化
this.pdfh5 = new Pdfh5("#Pdf", {
pdfurl: PDFurl,
// logo:{src:showImage,x:400,y:130,width:100,height:100},
logos:[{
logo:{src:showImage,name:value,x:175,y:200,width:100,height:100,font:'20px',color:"#ff0000"},//name:你要加入的文字 xy 位置 font 字體 color字體顏色
pageNum:1
},
{
logo:{src:showImage,name:'wangwu',x:195,y:200,width:100,height:100,font:'20px',color:"#ff0000"},
pageNum:1
},
{
logo:{src:showImage,name:'lisi',x:360,y:150,width:100,height:100,font:'30px',color:'#00ff00'},
pageNum:3
},
]
});
}
}
} catch (e) {
}
return dataUrl;
}
在界面中添加pdf控件
<View className='PdfCss' id="Pdf" ref={pdfRef}></View>
pdfh5.js的修改
在renderCanvas方法里面
return page.render(renderObj).then(function() 這個返回里面增加代碼
if(options.logos){
// console.log('====>ssssssss');
options.logos.map((item,index)=>{
if(item.pageNum == pageNum){
//---------------------水印開始---------------------
var cover = document.createElement('div');
cover.className = "cover";
cover.innerText = item.logo.name; //這里就是水印內(nèi)容胡陪，如果要按照不同的文件顯示不同的水印矿筝，可參考pdf文件路徑的傳值方式阿趁，在viewer.jsp中head部位接收后臺傳值并在這里使用
container.appendChild(cover);
// div.appendChild(cover);
console.log('====>水印3');
var coverEle = document.getElementsByClassName('cover'),size = 0,
nowWidth = +obj2.canvas.style.width.split("p")[0],
//714為100%時，每頁的寬度请梢。對比當前的寬度可以計算出頁面變化后字體的數(shù)值
size = 50 * nowWidth / 714 + "px";
for(var i=0, len=coverEle.length; i<len; i++){
if(i == index){
coverEle[i].style.fontSize = item.logo.font;
coverEle[i].style.height = obj2.height/ 10;
coverEle[i].style.position = 'absolute';
coverEle[i].style.color = item.logo.color;
coverEle[i].style.disable = 'flex';
coverEle[i].style.top = item.logo.x+'px';
coverEle[i].style.left = item.logo.y+'px';
}
}
container.appendChild(cover);
}
})
}
在init方法里面
Pdfh5.prototype = {
init:
在viewer.className = 'pdfViewer';之后增加代碼
viewer.id = 'pdfViewer';
在pdfh5.css里面增加
.cover {
display: block;
position: absolute;
z-index: 9999;
cursor: default;
/* user-select: none; */
}
在你要導(dǎo)出的界面增加導(dǎo)出pdf的代碼
function toImage() {
var view = document.getElementById('pdfViewer')
console.log(view);
html2canvas(view).then(canvas => {
let dataURL = canvas.toDataURL("image/jpeg",1);
var contentWidth = canvas.width/3;
var contentHeight = canvas.height/3;
// var pageHeight = contentHeight/5;
var pageHeight = contentWidth / 446* 640;
//未生成pdf的html頁面高度
var leftHeight = contentHeight;
//頁面偏移
var position = 0;
//a4紙的尺寸[595.28,841.89]忧额，html頁面生成的canvas在pdf中圖片的寬高
var imgWidth = contentWidth;
var imgHeight = (446 / contentWidth) * contentHeight;
// this.imgUrl = dataURL;
console.log("11111")
console.log(dataURL)
var pdf = new jsPDF('','px','a4');
console.log('contentHeight ==>'+contentHeight + " contentWidth===>"+contentWidth+' pageHeight===>'+pageHeight+' leftHeight'+leftHeight+' position'+position+' imageHeight='+imgHeight+' imageWidth='+imgWidth)
if(leftHeight < pageHeight) {
pdf.addImage(dataURL, 0, 0, imgWidth, imgHeight );
} else{
while(leftHeight > 0) {
// pdf.addImage(dataURL, 0, position, 803, 5676)
pdf.addImage(dataURL, 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 631;
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('a4.pdf')
});
}
新人做的，歡迎大佬指正
