Vue.js组件开发-实现HTML内容打印

2025/2/3 16:05:39 来源：https://blog.csdn.net/michael_jovi/article/details/145381901 浏览: 次关键词：Vue.js组件开发-实现HTML内容打印

在Vue项目中实现打印功能，可以借助vue-html-to-paper插件来完成。

步骤

创建Vue项目：如果还没有Vue项目，可以使用Vue CLI来创建一个新的项目。

npm install -g @vue/cli
vue create vue-print-template
cd vue-print-template

安装vue-html-to-paper插件：该插件可以将HTML内容转换为打印页面。

npm install vue-html-to-paper --save

在Vue项目中配置和使用插件：在main.js中引入并使用该插件，然后在组件中使用它来实现打印功能。

完整代码

`main.js`

import Vue from 'vue';
import App from './App.vue';
// 引入vue-html-to-paper插件
import VueHtmlToPaper from 'vue-html-to-paper';// 配置插件选项
const options = {name: '_blank', // 打印窗口的名称specs: ['fullscreen=yes', // 全屏模式'titlebar=yes', // 显示标题栏'scrollbars=yes' // 显示滚动条],styles: ['https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', // 引入外部样式'/css/print.css' // 引入自定义打印样式]
};// 使用插件
Vue.use(VueHtmlToPaper, options);Vue.config.productionTip = false;new Vue({render: h => h(App),
}).$mount('#app');

`App.vue`

<template><div id="app"><!-- 打印按钮 --><button @click="printTemplate">打印模板</button><!-- 打印模板内容 --><div id="print-template" ref="printTemplate"><h1>这是一个打印模板</h1><p>这里可以放置你需要打印的内容。</p></div></div>
</template><script>
export default {name: 'App',methods: {printTemplate() {// 使用vue-html-to-paper提供的$htmlToPaper方法进行打印this.$htmlToPaper(this.$refs.printTemplate, {// 可以在这里覆盖全局配置选项styles: ['https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css','/css/print.css']});}}
};
</script><style>
/* 全局样式 */
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

详细代码注释

main.js：
- 引入vue-html-to-paper插件，并配置打印窗口的选项，如名称、规格和样式。
- 使用Vue.use()方法将插件安装到Vue实例中。
App.vue：
- 在模板中定义一个按钮，点击该按钮会触发printTemplate方法。
- 创建一个div元素作为打印模板的容器，并使用ref属性引用该元素。
- 在methods中定义printTemplate方法，使用this.$htmlToPaper方法将指定的DOM元素转换为打印页面。