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

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

步骤

  1. 创建Vue项目:如果还没有Vue项目,可以使用Vue CLI来创建一个新的项目。
bash 复制代码
npm install -g @vue/cli
vue create vue-print-template
cd vue-print-template
  1. 安装vue-html-to-paper插件:该插件可以将HTML内容转换为打印页面。
bash 复制代码
npm install vue-html-to-paper --save
  1. 在Vue项目中配置和使用插件 :在main.js中引入并使用该插件,然后在组件中使用它来实现打印功能。

完整代码

main.js
javascript 复制代码
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
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元素转换为打印页面。

使用说明

  1. 运行项目:在项目根目录下运行以下命令启动开发服务器。
bash 复制代码
npm run serve
  1. 打开浏览器 :访问http://localhost:8080,会看到一个"打印模板"按钮和一个包含打印内容的div元素。
  2. 点击打印按钮:点击"打印模板"按钮,会弹出一个新的打印窗口,显示打印模板的内容。可以在这个窗口中进行打印设置并打印。
  3. 自定义样式 :如果需要自定义打印样式,可以在/public/css/print.css文件中编写样式代码,并在main.js或组件中引入该文件。
相关推荐
麦麦大数据1 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区2 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗2 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长2 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅3 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_3 小时前
Chrome开发者工具
前端·chrome
YiHanXii3 小时前
this 输出题
前端·javascript·1024程序员节
楊无好4 小时前
React中ref
前端·react.js
程琬清君4 小时前
vue3 confirm倒计时
前端·1024程序员节
麦麦大数据4 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节