vue3将dom打印pdf文件

这里使用的是vue3的一个插件

vue3-print-nb

使用步骤

1.安装插件

npm install vue3-print-nb --save

2.在main.js引入

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

3.给按钮绑定打印

<div id="haha">
    <p>葫芦娃，葫芦娃</p>
    <p>一根藤上七朵花 </p>
    <p>小小树藤是我家 啦啦啦啦 </p>
    <p>叮当当咚咚当当　浇不大</p>
    <p> 叮当当咚咚当当 是我家</p>
    <p> 啦啦啦啦</p>
    <p>...</p>
</div>

<button v-print="'#haha'">打印/导出pdf</button>

//这里的'#haha',是传入一个根据id选择dom的字符串参数

4.css样式注意

1.使用vue的单文件组件时，打印的dom的css需要单独换行写，不要写进父元素的嵌套里面

2.需要打印的dom和它里面的子元素样式可以嵌套

5.打印时在更多设置里勾选背景图形，展示css设置的颜色