使用jspdf将html内容转换成pdf下载到本地,html导出为pdf
一、?
html转换系列常规?
二、使用步骤
1.使用script标签引入库
将script代码写入index.js文件,body下面,养成好习惯
代码如下(示例):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
2.使用jspdf
html
代码如下(示例):
<div id="htmlToPdf">
<div id="centerBody">
<div>
<div id="content">
<h1>The title goes here</h1>
<p>The pararaph goes here</p>
</div>
<div id="page"></div>
<button id="submit" @click="exportPdf" class="custom-btn btn-1">导出</button>
</div>
</div>
</div>
js
name: "htmlToPdf",
data() {
return {};
},
methods: {
exportPdf() {
var doc = new jsPDF();
var specialElementHandlers = {
"#editor": function (element, renderer) {
return true;
},
};
doc.fromHTML(document.getElementById("content").innerHTML, 15, 15, {
width: 190,
elementHandlers: specialElementHandlers,
});
doc.save("sample-page.pdf");
},
},
css福利
.custom-btn {
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: "Lato", sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}
/* 1 */
.btn-1 {
background: rgb(6, 14, 131);
background: linear-gradient(
0deg,
rgba(6, 14, 131, 1) 0%,
rgba(12, 25, 180, 1) 100%
);
border: none;
}
.btn-1:hover {
background: rgb(0, 3, 255);
background: linear-gradient(
0deg,
rgba(0, 3, 255, 1) 0%,
rgba(2, 126, 251, 1) 100%
);
}
3.完成
链接: https://github.com/NotBerlin/vue-router-vuex/tree/dev_services.