vue 下载网页为pdf格式

最新推荐文章于 2024-07-19 15:47:55 发布

原创最新推荐文章于 2024-07-19 15:47:55 发布 · 498 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #pdf #elementui

该文章展示了在Vue项目中如何利用html2canvas将HTML内容转化为canvas，然后用jspdf将canvas转换为PDF文件进行下载。用户点击‘邀请函管理’后，弹出对话框显示邀请函内容，点击‘下载’按钮即可下载为PDF。

在vue的项目中，先安装需要用到的两个依赖分别是html2canvas和jspdf

①npm install --save html2canvas
 
②npm install jspdf --save


下载功能

<template>
  <div class="policy">
    <a @click="getInviteLetter" style="color: #199aba;margin-left: 10px;cursor: pointer;">邀请函管理</a>
    <el-dialog  :visible.sync="dialogLetterVisible" width="50%" :before-close="handleClose" :title="'邀请函'">
      <el-form class="demo-ruleForm" >
        <el-form-item label="" prop="title" id="iframeId">
          <div class="yqhback">
            <img src="/static/img/yqhback.png" width="100%" alt="">
            <div class="yqhcontent">
              <div class="yqhtitle">
                <img src="/static/img/yqh.png"/>
              </div>
              <div class="yqhtext">
                <div style="text-indent: 2rem">{{yqhInfo.content}}</div>
                <div class="timeaddress">
                  <p>活动时间：{{yqhInfo.hdtime}}</p>
                  <p>活动地点：{{yqhInfo.address}}</p>
                </div>
              </div>
              <div>
                <div class="yqhjc">
                  <img src="/static/img/jc.png">
                </div>
                <div class="activity_time" v-for="item in yqhInfo.active_timearr">
                  <p>{{item.time}}</p>
                  <ul >
                    <li v-for="item1 in item.arr">{{item1.start}}-{{item1.end}}&nbsp &nbsp &nbsp {{item1.content}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <div class="text-right">
          <el-button @click="downLoad('ruleForm1')">下载</el-button>
          <el-button type="primary"  @click="cancle('ruleForm1')">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { downloadPDF } from '@/utils/pdf.js'
export default {
  computed: {
  },
  data () {
    return {
      dialogLetterVisible:false,
      yqhInfo:{
        address:'',
        content:'',
        lk_main:'',
        lk_time:'',
        yq_title:'',
        active_timearr:[],
        hdtime:'',
      },
    }
  },
  created: function () {
  },
  methods: {
    back(){
      this.$router.push({ path: '/science/index?aside=33'+'&detailId='+this.detailId })
    },
    // 点击下载PDF
    downLoad() {
      downloadPDF(document.getElementById('iframeId'))
    },
    cancle(){
      this.dialogLetterVisible = false
    },
    getInviteLetter(){
      this.dialogLetterVisible = true
    },
  },
  mounted () {
  },

}
</script>

pdf.js

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

export const downloadPDF = page => {
  html2canvas(page).then(function(canvas) {
    canvas2PDF(canvas);
  });
};

const canvas2PDF = canvas => {
  let contentWidth = canvas.width;
  let contentHeight = canvas.height;

  let pageHeight = contentWidth / 592.28 * 841.89
  let leftHeight = contentHeight
  let position = 0
  let imgWidth = 595.28
  let imgHeight = 592.28 / contentWidth * contentHeight

  let pageData = canvas.toDataURL('image/jpeg', 1.0)
  // eslint-disable-next-line new-cap
  let pdf = new jsPDF('', 'pt', 'a4')
  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("邀请函.pdf");
};