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.给按钮绑定打印

    
葫芦娃，葫芦娃
    
一根藤上七朵花 
    
小小树藤是我家 啦啦啦啦 
    
叮当当咚咚当当　浇不大
    
 叮当当咚咚当当 是我家
    
 啦啦啦啦
    
...


打印/导出pdf

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

4.css样式注意

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

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

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