Vue页面上实现PDF导出

Vue页面上实现PDF导出

1. 下载包 npm i vue-to-pdf --save
2. 在main.js/App.js中加入引用：

import vueToPdf from 'vue-to-pdf';
Vue.use(vueToPdf);

3.页面

点击导出pdf

页面代码

<template>

<div>
    <button  @click="savePdf()">导出pdf</button>
    <div style="width: 100%;padding:10px" >
      <table
      style="width:1000px"
        align="center"
        width="100%"
        border="1"
         ref="exportPdf"
      > 
        <tbody>
          <tr>
            <th colspan="10" class="zxstyle ly">
              计算机专业（专业代码：456454）
            </th>
          </tr>
          <tr>
            <th class="zxstyle">课程类型</th>
            <th class="zxstyle">序号</th>
            <th class="zxstyle">课程代码</th>
            <th class="zxstyle">课程名称</th>
            <th class="zxstyle">学分</th>
            <th class="zxstyle">教材名称</th>
            <th class="zxstyle">主编</th>
            <th class="zxstyle">出版社</th>
            <th class="zxstyle">版次</th>
            <th class="zxstyle">备注</th>
          </tr>
          <tr v-for="(item, index) in sjList" :key="item.id">
            <td
              align="center"
              :rowspan="item.kclxspan"
              :class="{ hidden: item.kclxdis }"
            >
              {{ item.kclx }}
            </td>
            <td>{{ index + 1 }}</td>
            <td>{{ item.kcdm }}</td>
            <td>{{ item.kcmc }}</td>
            <td>{{ item.xf }}</td>
            <td>{{ item.cjmc }}</td>
            <td>{{ item.zb }}</td>
            <td>{{ item.cbs }}</td>
            <td>{{ item.bc }}</td>
            <td>{{ item.bz }}</td>
          </tr>
        </tbody>
      </table>
    </div>
</div>
</template>
<script>
export default {
  name: "pdf",
  data: function() {
    return {
      sjList: [
        {
          kclx: "公共课",
          kcdm: "000015",
          kcmc: "语文",
          xf: "14",
          cjmc: "语文",
          zb: "张宏",
          cbs: "北京大学出版社",
          bc: "2025",
          bz: "无"
        },
        {
          kclx: "公共课",
          kcdm: "000013",
          kcmc: "英语",
          xf: "52",
          cjmc: "英语",
          zb: "张近东",
          cbs: "北京大学出版社",
          bc: "2027",
          bz: "无"
        },
        {
          kclx: "公共课",
          kcdm: "000019",
          kcmc: "数学",
          xf: "14",
          cjmc: "数学",
          zb: "阿斯蒂",
          cbs: "北京大学出版社",
          bc: "2028",
          bz: "无"
        },
        {
          kclx: "考核课",
          kcdm: "000056",
          kcmc: "物理",
          xf: "11",
          cjmc: "物理",
          zb: "萨蒂",
          cbs: "北京大学出版社",
          bc: "2029",
          bz: "无"
        },
        {
          kclx: "考核课",
          kcdm: "000045",
          kcmc: "化学",
          xf: "14",
          cjmc: "化学",
          zb: "名点",
          cbs: "北京大学出版社",
          bc: "2027",
          bz: "无"
        },
        {
          kclx: "公共课",
          kcdm: "000085",
          kcmc: "生物",
          xf: "36",
          cjmc: "生物",
          zb: "张炯",
          cbs: "北京大学出版社",
          bc: "2028",
          bz: "无"
        }
      ]
    };
  },

  methods: {
    // 导出为pdf
      savePdf(){
       this.$PDFSave(this.$refs.exportPdf, "文件名称");
   },
  }
};
</script>
<style scoped>
.hidden {
  display: none;
  
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}
table td,
table th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 30px;
}
table thead th {
  background-color: #cce8eb;
  width: 100px;
}
table tr:nth-child(odd) {
  background: #fff;
}
table tr:nth-child(even) {
  background: #f5fafa;
}
</style>