1.开发工具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"
创建pdf控件
try {
// 缓存中的pdfUrl
let PDFurl = '你的pdf网址'
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; //这里就是水印内容，如果要按照不同的文件显示不同的水印，可参考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%时，每页的宽度。对比当前的宽度可以计算出页面变化后字体的数值
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; */
}
在你要导出的界面增加导出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')
});
}
新人做的，欢迎大佬指正
