电商项目中,经常会遇到导出为PDF的功能,最最简单的方式就是:window.print()
,可以自动展示出当前页面的打印预览效果。
如果使用:window.print()
实现打印,我们可以通过在浏览器控制台测试一下效果:
效果如下所示:
这种情况window.print()
适用于全屏页面的,而非弹窗的形式,如果要只打印弹窗部分,则需要用其他的方式:
html2pdf
实现导出html
页面为pdf
1.npm install html2canvas jspdf --save
——安装插件到package.json文件中的dependencies
里
将html2canvas
和jspdf
安装到package.json
文件中的dependencies
中,方便其他人通过npm install
可以下载到本地的node_modules
中
2.在utlis
文件夹中添加html2pdf.js
文件,内容如下:
// 导出页面为PDF格式
import html2canvas from "html2canvas";
import JSPDF from "jspdf";
/*** * elementName: 需要输出PDF的页面id * htmlTitle: 页面标题 * currentTime:创建时间 */
export default function(elementName, htmlTitle, currentTime) {
var element = document.getElementById(elementName)
html2canvas(element, {
logging: false
}).then(function(canvas) {
var pdf = new JSPDF("p", "mm", "a4") // A4纸,纵向
var ctx = canvas.getContext("2d")
var a4w = 190;
var a4h = 257 // A4大小,210mm x 297mm,四边各保留20mm的边距
var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
var renderedHeight = 0
while (renderedHeight < canvas.height) {
var page = document.createElement("canvas")
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
// 用getImageData剪裁指定区域,并画到前面创建的canvas对象中
page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面,保留10mm边距
renderedHeight += imgHeight
if (renderedHeight < canvas.height) {
pdf.addPage() } // 如果后面还有内容,添加一个空页
// delete page;
}
pdf.save(htmlTitle + currentTime)
})
}
3.在需要的页面使用:
import ExportSavePdf from "@/utils/html2pdf";
export default{
...
//保存文件
ExportSavePdf("pdfcontent", "对账单",timeFormat(new Date(), "YYYY-mm-dd"));
}
分析一下上面的三个参数:
elementName
:需要输出PDF
的页面的id
htmlTitle
:导出的PDF
的页面标题currentTime
:导出的PDF
的页面时间
第一个id
就是页面中,需要导出部分的id
;
第二个参数和第三个参数就是导出的pdf
的标题部分组成:
今天的文章html5网页前端设计pdf_html5 pdf[通俗易懂]分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/75708.html