html2canvas+jspdf实现网页分页保存为pdf示例代码-html代码-BFW代码库

html2canvas+jspdf实现网页分页保存为pdf示例代码

代码语言：html

所属分类：其他

代码描述：html2canvas+jspdf实现网页分页保存为pdf示例代码，可自定义pdf页面大小，将网页中指定的dom元素内容截图保存为pdf页面。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/html2canvas.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jspdf.js"></script>

    <style>
        .elearea{
            width: 800px;
            display: flex;
            height: 600px;
            overflow: hidden;
      
        }
    </style>
</head>

<body>
    <div class="elearea">
        <div style="margin:40px;">
            <h1>目录</h1>
            <p>1、This is a simple example </p>
            <p>2、This is a simple example </p>
            <p>3、This is a simple example </p>
            <p>4、This is a simple example </p>
        </div>
        <img style="flex:1;margin:140px 10px;" src='//repo.bfw.wiki/bfwrepo/image/62be28fc221f0.png' />
    </div>

    <div class="elearea" style="flex-direction:column;">
        <div style="margin:40px;">
            <h1>目录2</h1>
            <p>也美少女数量的废旧塑料底甲方数量及的分类手动方式来垫付框架示例快递费记录考试底甲方 </p>
           
        </div>
        <img style="flex:1;margin:0 40px 40px 40px;" src='//repo.bfw.wiki/bfwrepo/im.........完整代码请登录后点击上方下载按钮下载查看