vue打印功能vue-print-nb

原创已于 2023-05-23 17:53:38 修改 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #node.js

于 2023-05-12 11:12:54 首次发布

文章介绍了如何在Vue项目中使用vue-print-nb库进行打印操作。首先，通过npm安装依赖，然后在main.js中引入并使用。关键内容是将要打印的元素（如ve-histogram图表）包裹在特定ID的div内，并添加打印按钮，利用v-print指令触发打印。在组件返回的对象中定义打印配置，包括打印元素ID、标题等。

开始

安装依赖：npm install vue-print-nb --save

在main.js中引入

import Print from 'vue-print-nb'

Vue.use(Print)

要打印的内容用 id="printMe"包起来

  <!-- 打印 -->
                <div id="printMe">
                  <ve-histogram
                    style="margin:auto"
                    :data="chartDataStatisticsSectionWarning"
                    :legend="thereDataSetting.legend"
                    :extend="thereDataSetting.extend"
                    :settings="thereDataSetting"
                    height="300px"
                    width="100%"
                    :colors="thereDataSetting.userColor">
                  </ve-histogram>
                </div>

给打印的按钮加上v-print="printObj"

<a-button type="primary" v-print="printObj" class="print">打印</a-button>

然后在returnl里定义

return {
      // 打印小票
      printObj: {
        id: 'printMe', // 这里是要打印元素的ID
        popTitle: '&nbsp', // 打印的标题
        extraCss: '', // 打印可引入外部的一个 css 文件
        extraHead: '' // 打印头部文字
      },
}