JS导出页面为PDF,分页导出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- cdn引入vue以及elementui组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- echarts相关文件 -->
   <script src="echat.js" type="text/javascript" charset="utf-8"></script>
   <!-- pdf -->
      <script src="./bluebird.js" type="text/javascript" charset="utf-8"></script>
      <script src="./html2canvas.js" type="text/javascript" charset="utf-8"></script>
      <script src="./jsPdf.debug.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
        #app {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding:0px;
            height:100%;
        }

        [v-cloak] {
            display: none;
        }

        .headTitle {
            text-align: center;
            font-size: 30px;
        }

        .headDate {
            text-align: center;
        }

        .blocked {
            width: 6px;
            height: 25px;
            border-radius: 10px;
            margin-right: 10px;
            display: inline-block;
            background-color: #409EFF;
        }

        .bpbox {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            color: #333;
            font-weight: bold;
        }

        .markdownbase {
            margin-bottom: 20px;
        }
        #chart_example {
          width: 95%;
          padding: 10px 10px;
          height: 500px;
          border: 1px solid #ccc;
          margin: 10px auto;
        }
        #Basic{
           width: 95%;
           padding: 10px 10px;
           height: 500px;
           border: 1px solid #ccc;
           margin: 10px auto; 
        }
    </style>
    <body>
        <div id="app" v-cloak>
            <h1 class="headTitle" v-cloak>{
  {userbase.title}}</h1>
            <div class="headDate" v-cloak>
                测评时间{
  {userbase.createtime}}
            </div>
            <el-button type="info" @click="getDown" id="btn-html2canvas">下载</el-button>
            <!-- 用户详情数据 -->
            <div class="userBase">
                <div class="bpbox">
                    <span class="blocked"></span> 个人信息
                </div>
                <el-descriptions>
                    <el-descriptions-item label="姓名">{
  {userbase.name}}</el-descriptions-item>
                    <el-descriptions-item label="性别">{
  {userbase.sex}}</el-descriptions-item>
                    <el-descriptions-item label="年龄"> {
  {userbase.age}}</el-descriptions-item>
                    <el-descriptions-item label="出生日期">
                        {
  {userbase.bothTime}}
                    </el-descriptions-item>
                    <el-descriptions-item label="组织结构">{
  {userbase.departName}}</el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- 测评结果 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 测评结果
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="抑郁">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="焦虑">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 干预建议 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 干预建议
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="分析">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 共病检测 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 共病检测
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="分析">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 雷达图 -->
            <div class="">
                    <div id="Basic"></div>
            </div>
            <!-- 维度结果 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 维度结果
                </div>
                <div class="markdownbase">
                    <el-tabs type="border-card">
                        <el-tab-pane label="分析">
                            <div v-html="content"></div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 标准分趋势 -->
            <div class="">
                <div class="bpbox">
                    <span class="blocked"></span> 标准分趋势
                </div>
                <div class="markdownbase">
                     <div id="chart_example"></div>
                </div>
            </div>
        </div>
      
  
        <script type="text/javascript">
            var app = new Vue({
                el: "#app",
                data: {
                    // 用户个人详情数据
                    userbase: {
                        title: "哈哈哈哈",
                        name: "皮卡丘",
                        sex: "男",
                        age: 25,
                        bothTime: "1995-02-11",
                        createtime: "2021-06-11 13:41:22",
                        departName: "小学部,小学一年级,1班"

                    },
                    // 雷达
                   Basic:{
                     title: {
                       text: '雷达图'
                     },
                     tooltip: {
                       trigger: 'axis'
                     },
                     legend: {
                       left: 'center',
                       data: [
                         '雷达',
                       ]
                     },
                     radar: [
                       {
                         indicator: [
                           { text: '一般焦虑', max: 200 },
                           { text: '抑郁', max: 200 },
                           { text: '暴躁', max: 200 },
                           { text: '幻想', max: 200 }
                         ],
                         center: ['50%', '50%'],
                         radius: 150
                       },
                     ],
                     series: [
                       {
                         type: 'radar',
                         tooltip: {
                           trigger: 'item'
                         },
                         areaStyle: {},
                         data: [
                           {
                             value: [60, 73, 85, 40],
                             name: '雷达'
                           }
                         ]
                       },
                     ]
                   },
                    // 富文本来源
                    content: "<h4 class=\"ql-align-justify\"><br></h4><h4 class=\"ql-align-justify\">你知道人快速且下意识的表情可以透露出ta的真实情绪吗?</h4><h4 class=\"ql-align-justify\">你知道不用测谎仪怎么看出ta是否在撒谎吗?</h4><h4 class=\"ql-align-justify\"><strong>只要你学会了微表情分析,你就是个“人肉测谎仪”!</strong>——然而!有一部经典美剧,可以让你快速入门微表情分析。</h4><h4 class=\"ql-align-justify\"><strong>这就是经典美剧,《别对我说谎》也译作《千谎百计》!</strong></h4><h4 class=\"ql-align-justify\"><br></h4><h4></h4><h4><span style=\"background-color: rgb(255, 255, 255); color: rgb(182, 182, 182);\">图/《千谎百计》正式海报</span></h4></h4>",
       options:{
            title: {
              text: '标准分趋势'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['抑郁', '广场恐惧', '特殊恐惧症', '社交恐惧', '强迫障碍']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
              },
              {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
              },
              {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
              },
              {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
              },
              {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
              }
            ]
          }
                },
                  mounted() {
                    var that = this;
                    var myChart = echarts.init(document.getElementById("chart_example"));
                        myChart.setOption(that.options);
                        
                        // 雷达
                        var myChasrt = echarts.init(document.getElementById("Basic"));
                            myChasrt.setOption(that.Basic);
                        
                  },
                  methods:{
                      getDown(){
                          
                            var shareContent = document.getElementById("app")
                              var width = shareContent.offsetWidth / 4
                              var height = shareContent.offsetHeight / 4
                              let _this = this
                            html2canvas(document.getElementById("app"), {
                             scale: 2, //放大一倍,使图像清晰一点
                                onrendered: function(canvas) {
                                 var context = canvas.getContext('2d')
                                            context.mozImageSmoothingEnabled = false
                                            context.webkitImageSmoothingEnabled = false
                                            context.msImageSmoothingEnabled = false
                                            context.imageSmoothingEnabled = false
                                            var pageData = canvas.toDataURL('image/jpeg', 1.0)
                                            var img = new Image()
                                            img.src = pageData
                                            img.onload = function () {
                                                // 获取dom高度、宽度
                                                img.width = img.width / 2
                                                img.height = img.height / 2
                                                img.style.transform = 'scale(0.5)'
                                                if (width > height) {
                                                    // 此可以根据打印的大小进行自动调节
                                                    // eslint-disable-next-line
                                                    var pdf = new jsPDF('l', 'mm', [
                                                        width * 0.65,
                                                        height * 0.545
                                                    ])
                                                } else {
                                                    // eslint-disable-next-line
                                                    var pdf = new jsPDF('p', 'mm', [
                                                        width * 0.65,
                                                        height * 0.545
                                                    ])
                                                }
                                                pdf.addImage(
                                                    pageData,
                                                    'jpeg',
                                                    0,
                                                    0,
                                                    width * 0.65,
                                                    height * 0.545
                                                )
                                                pdf.save("报告" + '.pdf')
                                            }
                        
                                    // //输出保存命名为content的pdf
                                    // doc.save('content.pdf');
                                }
                            });
                      
                      }
                  }
            });
        </script>
    </body>
</html>```


![在这里插入图片描述](https://img-blog.csdnimg.cn/1f043b6978d14d9a896fefdddcb278f6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6I-c6bif6ICB5LqU,size_20,color_FFFFFF,t_70,g_se,x_16)


    原文作者:Z.RF
    原文地址: https://blog.csdn.net/qq_35695041/article/details/121044354
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞