搜索
简帛阁>技术文章>【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页

【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页

1、目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页

1、项目背景:
对客户报修记录进行分类统计,并生成各种饼图、柱状图、线性图。并要求导出word,并打印。html里面内容是通过js刷新出来的,是动态的数据。

2、项目难点:
1)html导出到word,不太可能,页面比较复杂,内容比较多,而且word不支持。
2)html页面存在多个 echart图表,根本无法导出。

3、折中方案
采用jspdf插件,将html页面导出成pdf,在打印pdf。 效果不是特别理想,但是还过的去。


4、具体操作
1)下载jspdf插件,官网有。
2)html页面引用两个js文件 jspdf.debug.js  和 html2canvas.js  (利用该插件将html页面转化成图片,在插入到pdf中)
3)编写一个js方法 即可实现 转化pdf。并可以指定导出区域。

 

2、引入类库包:

<!-- .pdf文件下载  download -->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>

3、需要下载页面内容,假设在一个DIV里面(vue2.0示例):

<div class="right-aside" id="pdfDom" class="right-aside">
        
        <section class="content-header">
            @yield('search')
        </section>
        <section class="content">
            @yield('content')
        </section>
        <i-col span="8">
            <i-button type="warning" @click="makeMpdf()">导出PDF文件</i-button>
        </i-col>
</div>
<script type="text/javascript">
function makeMpdf () {
    if(confirm("您确认下载该PDF文件吗?")){
       var pdf = new jsPDF('p','pt','a4');
    // 设置打印比例 越大打印越小
       pdf.internal.scaleFactor = 2;
       var options = {
           pagesplit: true, //设置是否自动分页
          "background": '#FFFFFF'   //如果导出的pdf为黑色背景,需要将导出的html模块内容背景 设置成白色。
      };
       var printHtml = $('#pdfDom').get(0);   // 页面某一个div里面的内容,通过id获取div内容
       pdf.addHTML(printHtml,15, 15, options,function() {
          pdf.save('目标.pdf');
      });
    }
}

</script>

 

4、或者上面的JS方法可以替换成这个也是可以的。

//将html页面导出.pdf格式文件(适用于jQuery、vue库)  -- xzz 2018/04/24
function makeMpdf(pdfName) {
  if(confirm("您确认下载该PDF文件吗?")){
    var target = document.getElementsByClassName("right-aside")[0];
    target.style.background = "#FFFFFF";
    if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate();
    
    html2canvas(target, {
        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 = canvas.toDataURL('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(pdfName+".pdf");
        }
      })
  }
}

5、效果:

 

1、目的:在前段是jQuery库或者VUE库或者两者混合库,html页面和数据转换PDF格式下载支持分页1、项目背景:对客户报修记录进行分类统计,生成各种饼图、柱状图、线性图。要求导出wo
结合html2canvas和jsPDF实现html页面转pdfBy:授客QQ:103355122实践环境win10Vue296axios0180html2canvas100rc3jspdf153安装h
jsPDF貌似不支持中文代码如下:<!DOCTYPEhtmlPUBLIC//W3C//DTDXHTML10Strict//ENhttp://wwww3org/TR/xhtml1/DTD/xht
jsPdf是一个可以把html转成pdf插件,有人多人在用。GitHub:https://githubcom/MrRio/jsPDF官方文档:http://rawgithackcom/MrRio/
jspdfjs+html2canvasHTMl导出PDF功能:PDF分页插入页头页尾输出A4格式PDF支持单页、多页输出效果预览:查看演示PDFdemo地址:demo需要引入JS的文件:<sc
由于前台html已经动态生成报表,而且,前台有一个功能,一个daterange组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。因此需要用到js生成生报表:用到的组件:jqueryjsjsp
代码如下:<html><head><metahttpequiv"ContentType"content"text/html;charsetGBK"><tit
目录A4尺寸安装插件html2canvas和jspdf在项目中引入遇到的问题多行省略号图片跨域Tainedcanvasesmaynotbeexportedbase64DataURLscheme支持的类
JsPDF是一个JavaScript插件,用于通过解析HTML表或从JavaScript直接提供数据来生成pdf的包含表。当我们在我们的网页中使用这个插件时,它会自动生成的pdf下载到我们的本地机器
介绍一下纯jspdf用法,一个图片列表导出为pdf文件,根据图片宽高计算在pdf中的位置jsPDF是一个基于HTML5的客户端解决方案,用于生成各种用途的PDF文档。1、安装:npminstallj