HTML下载⽣成WORD和PDF，及导出图⽚不能正常显⽰解决⽅案
<!DOCTYPE html>
<html class="pdfhtml" id="pdfhtml">
<head lang="en">
<meta charset="UTF-8">
<title>html导出⽣成word⽂档</title>
</head>
<body class="word">
<style type="text/css">
table {
border-right:1px solid black;
border-bottom:1px solid black;
border-collapse: collapse;
}
table td {
border-left:1px solid black;
border-top:1px solid black;
text-align: center;
}
table td {
height:35px;
}
.td_title {
text-align: left;
border-bottom: none;
}
.td_result {
height:100px;
border-top: none;
}
.td2_result {
height:50px;
text align centerborder-top: none;
}
.pdfhtml {
width:900px;
}
</style>
<div id="vueapp">
<table width="700px" align="center" >
<tr >
<td colspan="4" >
涵洞经常检查记录表
<input type="button" id="wordbtn" value="导出word">
<input type="button" id="wordbtn" value="导出word">
<input type="button" id="pdfbtn" value="导出pdf">
</td>
</tr>
<tr >
<td >项⽬公司：</td>
<td ><label id="ProjectCompany">{{list.name}}</label></td> <td >⽇常养护单位:</td>
<td ><label id="MaintenanceUnit ">{{list.name}}</label></td> </tr>
</table>
<table align="center" border="0px" width="700px">
<tr>
<td width="10%">路线编号及名称</td>
<td width="20%"><label id="RoadName"></label></td>
<td width="10%">涵洞类型</td>
<td width="10%"><label id="CulvertTypeName"></label></td>
<td rowspan="2" colspan="2" width="15%">是否过⽔涵洞</td>
<td rowspan="2" width="15%"><label id="OverflowOrLevel"></label></td>
</tr>
<tr>
<td>涵洞桩号</td>
<td colspan="3"><label id="Mileage">{{list.name}}</label></td>
</tr>
<tr>
<td rowspan="2" colspan="2">检查内容</td>
<td colspan="2">检查结果</td>
<td rowspan="2" colspan="3">检查情况说明</td>
</tr>
<tr>
<td class="result">是</td>
<td class="result">否</td>
</tr>
<tr>
<td colspan="2">进出⼝是否堵塞</td>
<td><label id="IsCheck1"></label></td>
<td><label id="IsCheck_1"></label></td>
<td colspan="3"><label id="InspectionDescribe1"></label></td>
</tr>
<tr>
<td colspan="2">洞内是否淤塞及排⽔不畅</td>
<td><label id="IsCheck2"></label></td>
<td><label id="IsCheck_2"></label></td>
<td colspan="3"><label id="InspectionDescribe2"></label></td>
</tr>
<tr>
<td colspan="2">洞⼝周围是否有杂物堆积</td>
<td><label id="IsCheck3"></label></td>
<td><label id="IsCheck_3"></label></td>
<td colspan="3"><label id="InspectionDescribe3"></label></td>
</tr>
<tr>
<td colspan="2">涵洞是否清洁、漏⽔</td>
<td><label id="IsCheck4"></label></td>
<td><label id="IsCheck_4"></label></td>
<td colspan="3"><label id="InspectionDescribe4"></label></td>
</tr>
<tr>
<td colspan="2">涵洞结构是否损坏</td>
<td><label id="IsCheck5"></label></td>
<td><label id="IsCheck_5"></label></td>
<td colspan="3"><label id="InspectionDescribe5"></label></td>
</tr>
<tr>
<td colspan="2">涵⾝、涵顶是否存在裂缝</td>
<td><label id="IsCheck6"></label></td>
<td><label id="IsCheck6"></label></td>
<td><label id="IsCheck_6"></label></td>
<td colspan="3"><label id="InspectionDescribe6"></label></td>
</tr>
<tr>
<td colspan="2">
涵洞周围路基填⼟是否稳定、完整
</td>
<td><label id="IsCheck7"></label></td>
<td><label id="IsCheck_7"></label></td>
<td colspan="3"><label id="InspectionDescribe7"></label></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"class="td_title">处理意见：</td>
<td colspan="4"class="td_title">处理结果：</td>
</tr>
<tr>
<td colspan="3"class="td_result"><label id="DealSuggest"></label></td>
<td colspan="4"class="td_result"><label id="DealResult"></label></td>
</tr>
<tr>
<td colspan="7"class="td_title">备注：<label id="Remark"></label></td>
</tr>
<tr>
<td>检查、记录⼈</td>
<td><label id="OperatorName"></label></td>
<td rowspan="2">桥梁养护⼯程师</td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" >检查⽇期：</td>
</tr>
<tr>
<td>复核⼈</td>
<td><label id="AuditorName"></label></td>
<td colspan="2">2019年07⽉23⽇</td>
</tr>
</table>
</div>
<script type="text/javascript" src="/js/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/CommonUtils.js"></script>
<script type="text/javascript" src="/element/vue.js"></script>
<script type="text/javascript" src="/element/element.js"></script>
<script src="/doc/FileSaver.js"></script>
<script src="/doc/jquery.wordexport.js"></script>
<script src="/doc/html2canvas.js"></script>
<script src="/doc/jspdf.debug.js"></script>
<!--<script src="cdnjs.cloudflare/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="cdnjs.cloudflare/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>-->
<script>
var vum =new Vue({
el:'#vueapp',
data:{
list:{
name:'撒兴瑞'
}
},
});
$("#wordbtn").click(function(event){
$(".word").wordExport('word⽂档');
});
$("#pdfbtn").click(function(event){
downPdf()
});
function downPdf(){
var target = ElementsByClassName("pdfhtml")[0];
target.style.background ="#FFFFFF";
html2canvas(target,{
allowTaint:true,
taintTest:false,
scale:'2',
dpi:'192',
background:'#fff',
onrendered:function(canvas){
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//⼀页pdf显⽰html页⾯⽣成的canvas⾼度;
var pageHeight = contentWidth /592.28*841.89;
//未⽣成pdf的html页⾯⾼度
var leftHeight = contentHeight;
//页⾯偏移
var position =0;
//a4纸的尺⼨[595.28,841.89]，html页⾯⽣成的canvas在pdf中图⽚的宽⾼
var imgWidth =595.28;
var imgHeight =592.28/ contentWidth * contentHeight;
var pageData = DataURL('image/jpeg',1.0);
var pdf =new jsPDF('','pt','a4');
//有两个⾼度需要区分，⼀个是html页⾯的实际⾼度，和⽣成pdf的页⾯⾼度(841.89)
//当内容未超过pdf⼀页显⽰的范围，⽆需分页
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 -=841.89;
//避免添加空⽩页
if(leftHeight >0){
pdf.addPage();
}
}
}
pdf.save("content.pdf");
}
})
}
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论