vue-print-next

v1.0.9

Published

10 days ago

This is a directive wrapper for printed, Simple, fast, convenient, light.

Downloads

177

0High
0Medium
0Low

wen.ziyang

vue-print vue3-print print vue-print-nb vue3-print-nb

Vue Print Next

Vue 打印插件，简单、快速、方便、轻巧，支持 Vue 2 和 Vue 3。

本插件基于 vue3-print-nb 开发，并使用 TypeScript 完全重写，以更好地支持 Vue 3 的 setup 函数。

在线文档 : https://alexpang.cn/vue-print-next/docs

特性

支持指令调用和手动调用 VuePrintNext 方法进行打印。
更好地支持 Vue 3 的 setup 函数。
支持全局和局部内容打印，以及打印预览功能。
支持设置指定 class 样式的元素忽略打印
支持通过 css 选择器、手动传入 Dom 节点进行局部打印。

Demo

项目中提供了 Vue2 和 Vue3 的 demo 源码，可以 clone 下本项目后进行查看

Vue2： /demos/vue2-demo
Vue3： /demos/vue3-demo

在线 demo : https://alexpang.cn/vue-print-next/vue3-demo

安装

你可以通过 npm、 yarn 或 pnpm 安装该插件：

npm install vue-print-next --save
# or
yarn add vue-print-next
# or 
pnpm add vue-print-next

快速开始

1. 全局使用插件

在你的 main.ts 文件中：

import {createApp} from 'vue';
import App from './App.vue';
import {printPlugin} from 'vue-print-next';

const app = createApp(App);
app.use(printPlugin);
app.mount('#app');

2. Vue3 在组件中使用指令


<script setup>
  // 直接导入指令
  import {vPrint} from 'vue-print-next';
</script>

<template>
  <div>
    <button v-print>打印整个页面</button>
    <button v-print="'#printMe'">打印局部内容</button>
    <div id="printMe">
      <p>这是需要打印的局部内容</p>
      <p>更多内容...</p>
    </div>
  </div>
</template>

2. Vue2 在组件中使用指令


<script>
  import {vPrint} from "vue-print-next";

  export default {
    name: 'App',
    directives: {
      print: vPrint
    },
  }
</script>

<template>
  <div>
    <button v-print>打印整个页面</button>
    <button v-print="'#printMe'">打印局部内容</button>
    <div id="printMe">
      <p>这是需要打印的局部内容</p>
      <p>更多内容...</p>
    </div>
  </div>
</template>

4. 使用 `VuePrintNext` 类

如果你需要更复杂的打印逻辑，可以直接使用 VuePrintNext 类：


<script setup>
  import {VuePrintNext} from 'vue-print-next';

  function handlePrint() {
    new VuePrintNext({el: '#printMe', /** 其他参数 */});
  }
</script>

<template>
  <div>
    <button @click="handlePrint">打印局部内容</button>
    <div id="printMe">
      <p>这是需要打印的内容</p>
    </div>
  </div>
</template>

API 详解

`vPrint` 指令

全屏打印：<button v-print>打印整个页面</button>
局部打印：<button v-print="'#printMe'">打印局部内容</button>，其中 #printMe 是需要打印的 DOM 元素选择器。

`VuePrintNext` 类

用于手动调用打印功能。

参数说明

| 参数 | 类型 | 说明 | 默认值 | |-----------------------------|---------------------------|-------------------------------------|------------| | el | string | HtmlElement | 需要打印的元素，支持 css 选择器或 dom 节点 | - | | standard | string | 文档类型，默认是html5，可选 html5，loose，strict | 'html5' | | noPrintSelector | string[] | string | 打印时需要忽略的 css 选择器 | - | | popTitle | string | 打印时的页眉 | 默认当前 title | | preview | boolean | 是否启用打印预览功能 | false | | previewTitle | string | 预览窗口的标题 | '打印预览' | | previewPrintBtnLabel | string | 预览窗口中的打印按钮标签 | '打印' | | extraCss | string | 额外的 CSS 文件路径 | - | | extraHead | string | 额外的 <head> 内容 | - | | url | string | 打印指定的网址内容 | - | | asyncUrl | function | 异步加载 URL 内容的方法 | - | | zIndex | number | 预览窗口的 z-index值 | 20002 | | openCallback | function | 打印窗口打开时的回调 | - | | closeCallback | function | 打印窗口关闭时的回调 | - | | beforeOpenCallback | function | 打印窗口打开前的回调（打印预览使用） | - | | previewBeforeOpenCallback | function | 预览框架 iframe 加载前的回调（预览使用） | - | | previewOpenCallback | function | 预览框架 iframe 加载完成后的回调（预览使用） | - |

使用示例

打印整个页面


<button v-print>打印整个页面</button>

打印局部内容

通过指定 id 参数打印局部内容：


<div id="printMe">
  <p>这是需要打印的内容</p>
</div>

<button v-print="'#printMe'">打印局部内容</button>

允许传入一个 dom 节点，如下，可以通过 ref 获取打印元素


<script setup lang="ts">
  import {ref, type Ref} from 'vue';
  import {VuePrintNext} from "vue-print-next";

  function handlePrint() {
    const printEle = ref(null) as Ref<HTMLElement>;
    new VuePrintNext({el: printEle})
  }
</script>

<template>
  <div ref="printEle">
    <p>这是需要打印的内容</p>
  </div>

  <button v-print="handlePrint">打印局部内容</button>
</template>

传递对象参数


<template>
  <div>
    <div id="printMe">
      <p>这是需要打印的内容</p>
    </div>
  </div>

  <button v-print="printObj">打印局部内容</button>
</template>

<script setup>
  const printObj = {
    el: "#printMe",
    preview: true,
    extraCss: "https://cdn.example.com/extra.css",
    openCallback() {
      console.log('执行了打印');
    },
    closeCallback() {
      console.log('关闭了打印工具');
    }
  }
</script>

打印 URL

通过指定 URL 打印，并确保你的 URL 符合同源策略：


<template>
  <button v-print="printObj">打印指定 URL</button>
</template>

<script setup>
  const printObj = {
    url: 'https://example.com/print-content'
  }
</script>

忽略不需要打印的元素

通过设置 noPrintSelector 参数忽略不需要打印的元素：


<template>
  <div id="printMe">
    <p>葫芦娃，葫芦娃</p>
    <span class="no-print">这是<strong>不需要打印</strong></span>
    <p>一根藤上七朵花</p>
    <span class="no-print">这是<strong>不需要打印</strong></span>
    <p>风吹雨打都不怕</p>
    <span class="no-print">这是<strong>不需要打印</strong></span>
  </div>
  <button v-print="printObj">忽略不需要打印的元素</button>
</template>

<script setup>
  const printObj = {
    el: '#printMe',
    // 允许使用 css 选择器，支持传入数组
    noPrintSelector: '.no-print'
  }
</script>

异步加载 URL 内容

如果你的 URL 需要异步加载，可以使用以下方法：


<template>
  <button v-print="printObj">异步加载 URL 并打印</button>
</template>

<script setup>
  const printObj = {
    asyncUrl(resolve) {
      setTimeout(() => {
        resolve('https://example.com/print-content');
      }, 2000);
    }
  }
</script>

FAQ

常见问题文档 : https://alexpang.cn/vue-print-next/docs

License

MIT

欢迎在 GitHub Issues 上讨论并提出问题或提交 Pull Request！