vue3实现导出pdf

node 版本16
vue3实现 前端导出pdf
插件安装

npm install vue3-print-nb

在main.js中引入

import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

在所需页面进行使用

<template>
    <div>
        <div style="width: 800px;height: 800px; margin: auto;">
            <button @click="printPDF" style="margin-top: 10px;margin-right: 10px;">导出PDF</button>
            <div id="printData">
            <table border="1" >
                <caption>成绩单</caption>
                <tr>
                    <td>课程名称</td>
                    <td>{{ scoredata.courseName }}</td>
                </tr>
                <tr>
                    <td>班级</td>
                    <td>无</td>
                </tr>
                <tr>
                    <td>学生姓名</td>
                    <td>{{ scoredata.studentName }}</td>
                </tr>
                <tr>
                    <td>分数</td>
                    <td>{{ scoredata.score }}</td>
                </tr>
            </table>
        </div>
            
        </div>
    </div>
</template>

<script setup>
import html2pdf from 'html2pdf.js';
import { ref ,onMounted} from 'vue';
import router from "@/router/index.js";
const showScoreCard = ref(false);
let scoredata = ref([]);
const printPDF = () => {
    const element = document.querySelector('table');
    html2pdf().from(element).save();
};

</script>

<style scoped>
table {
  border-collapse: collapse;
  margin-top: 15px;
  width: 800px;
}

td,
th {
  border: 1px solid #a8abb2;
  padding: 5px;
}

caption {
  background-color: #827d7d; /* 设置表头背景颜色为灰色 */
  padding: 5px;
}
</style>

到这里就全部结束啦！！！