vue实现导出pdf文件，vue下载pdf，jspdf导出文件

1、下载插件

cnpm install html2canvas
cnpm install jspdf

2、样式

<template>
 
      <div class="info-box">
        <section id="pia" style="padding: 20px;">
          <div class="info-title">2022年07月18日易涝点积水报告</div>
          <div class="info-tips">报告时间：2022-07-19 07:00:00</div>
          <div>
            2022年07月18日，xx区大面积降雨，致使1处易涝点积水。现将当日处置情况汇报如下:
          </div>
          <div class="list-box" v-for="item in 1" :key="item">
          <div class="list-top">
            <span class="red-txt road-span">xx易涝点：</span>
            <span class="span-item">日降雨量：<span class="red-txt">100mm</span></span>
            <span class="span-item">当日最大雨量：<span class="red-txt">90mm</span></span>
            <span class="span-item">当日最小雨量：<span class="red-txt">20mm</span></span>
          </div>
          <section class="clcs-list-box">
            <div class="clcs-list-item">
              <div class="clcs-list-item-div">处理时间：<span class="red-txt">2022-07-18 08:50:00</span></div>
              <div class="clcs-list-item-div">处理单位：<span class="red-txt">xxx有限公司</span></div>
            </div>
            <div class="clcs-list-item">
              <div class="clcs-list-item-div" style="width: 80%">处置措施：<span class="red-txt">接雨情警报后，我单位工作人员立即到达现场，先行采取清理疏通排水设施，利用排水泵将路面积水排出，同时派专职人员值守，消除隐患。</span></div>
            </div>
            <div class="clcs-list-item">
              <div class="red-txt" style="margin-bottom: 5px;color:#515a6e">现场图片：</div>
              <div>
                <div v-for="(it,index) in img" :key="index" style="width: 250px;height: 150px;
                 margin-right: 10px;display: inline-block;overflow: hidden">
                  <el-image
                    style="width: 100%;height: 100%"
                    :src="it.url"
                    :preview-src-list="srcList">
                  </el-image>
                </div>
              </div>
            </div>
          </section>
        </div>
        </section>

        <div class="footer-down-btn">
          <div class="btn-down">下载word</div>
          <div class="btn-down" @click="downloadPDF">下载pdf</div>
        </div>
      </div>
 
</template>

<script>
  import html2Canvas from "html2canvas";
  import jsPDF from "jspdf";
  import global_msg from "@/scripts/global";

  export default {
    name: "reportInfo",
    data(){
      return{
        img:[
          {id:2,url:require('@/assets/systems_images/gis/jjl_002.png')},
          {id:1,url:require('@/assets/systems_images/gis/jjl_001.png')},

        ],
        srcList:[
          require('@/assets/systems_images/gis/jjl_002.png'),
          require('@/assets/systems_images/gis/jjl_001.png'),

        ]
      }
    },
    mounted() {
     
    },
    methods: {
      back() {
        this.$emit('back')
      },
      downloadPDF(){
        let that = this;
        global_msg.waitForPrompt = that.$loading({
          lock: true,
          text: '文件下载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        let name = '积水报告'

        setTimeout(function () {
          let content_html = document.getElementById("pia");
          let scale = 2
          let opts = {
            scrollY: 0,
            scrollX: 0,
            scale: 2,
            background:"#fff",
            dpi: 192,//导出pdf清晰度
            useCORS: true
          }
          html2Canvas(content_html, opts).then((canvas) => {

            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //pdf页面偏移
            var position = 0;
            //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
            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(`${name}.pdf`);
            global_msg.waitForPrompt.close()

          });
        },500)

      }
    }
  }
</script>

<style scoped>
  .info-title{
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: black;
  }
  .info-tips{
    text-align: right;
    margin: 20px 0;
    color: #7c7c7c;
  }
  .info-box{
    padding: 20px;
  }
  .span-item{
    margin-left: 10px;
  }
  .red-txt{
    color: #313131;
  }
  .clcs-list-item{
    width: 100%;
    margin-bottom: 8px;
  }
  .clcs-list-item-div{
    width: 50%;
    text-align: left;
    display: inline-block;
  }
  .list-top{
    margin: 20px 0;
  }
  .footer-down-btn{
    text-align: center;
    margin-top: 10px;
    position: fixed;
    bottom: 40px;
    left: 50%;
  /* width: calc(100% - 240px); */
  /* left: 0; */
  /* width: 100%;*/
}
.btn-down{
  width: 75px;
  height: 35px;
  background: #2196F3;
  text-align: center;
  line-height: 35px;
  border-radius: 5px;
  display: inline-block;
  margin-right: 15px;
  color: white;
  cursor: pointer;
}
.road-span{
  font-size: 16px;
  font-weight: 600;
}
</style>

3、自定义 scripts/global.js 文件

const waitForPrompt = null;

export default {
  waitForPrompt,    //等待提示
}

• 参考 https://blog.csdn.net/qq_39325340/article/details/126626560