vue+print快速实现前端打印

wzuof

已于 2024-01-25 17:14:40 修改

阅读量500

点赞数 10

文章标签：前端 vue.js

于 2024-01-25 15:32:37 首次发布

本文链接：https://blog.csdn.net/wzuof/article/details/135845468

版权

本文介绍了如何在Vue项目中安装并使用print-js库，实现页面内容的打印预览和定制化打印样式，包括设置打印元素、页眉和页脚等。

摘要由CSDN通过智能技术生成

1、安装print-js

//安装print-js
npm install print-js --save

2、在mian里面引入使用（全局可使用）

import print from 'print-js'
Vue.prototype.$print = print;

3、在要打印的页面使用

<template>
  <!-- 资产申购单-打印预览 -->
  <div class="content-view">
    <div id="print" v-loading="loading">
      <div class="print-header">
        <div class="print-title">资产申购单</div>
        <a-button id="btn" @click="print" class="print-btn no-print">
          打印
        </a-button>
      </div>
      <div>
      	 <div >111</div>
        <div style="break-after: page"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "printLook",
  data() {
    return {
      loading: false,
      isShow: false,
    };
  },
  methods: {
    print() {
      const style = "@page {margin:15mm 5mm};"; //打印时去掉眉页眉尾
      this.$print({
        printable: "print", // 标签元素id
        type: "html",
        headerStyle: "font-size:18px;",
        targetStyles: ["*"],
        documentTitle: "标题",
        ignoreElements: ["btn"],//需要忽略的打印元素
        margin: [0],
        style,
      });
    },
  },
};
</script>
<style lang="less" scoped>
#print {
  background: #fff;
}
</style>