vue-j-print v1.0.0

vue-j-print

一个支持自定义内容分页的vue打印插件

Install

yarn add vue-j-print
或
npm i vue-j-print -S

import { createApp } from 'vue'
import App from './App.vue'
import JPrint from '../print/index.js'

createApp(App).use(JPrint).mount('#app')

Notice

• JPrint组件所在页面会整体被打印，无需打印的元素可设置class="not-show"
• 打印的每一块设置class="print-section"
• 内容可以进行切分的块设置class="content-can-break"

Example

<JPrint
    :pageContentStartTop="300"
    :pageContentEndBottom="300"
    style="font-size: 20px;"
    ref="printComponent"
    class="print-wrapper"
>
	<div class="bg-imgs">
		<img class="bg-imgs__bubble" src="./assets/bubble.png">
		<img class="bg-imgs__wave" src="./assets/wave.png">
	</div>
    <button class="not-show" @click="handlePrint" style="height: 30px;width: 100px;display: block;">点击打印</button>
    <div class="line-wrapper print-section">
      <span>标题</span>
      <span>标题</span>
      <span>标题</span>
      <span>内容内容内容内容内容内容内容内容</span>
      <span>内容内容内容内容内容内容内容内容</span>
      <span>内容内容内容内容内容内容内容内容</span>
    </div>
    <pre class="print-section content-can-break">
        要点：
        1.这是一段测试文字
        2.这是一段测试文字
    </pre>
</JPrint>
  
export default {
  name: 'App',
  methods: {
    handlePrint () {
      this.$refs.printComponent.print()
    }
  },
  setup () {
    return {
      handleBeforePrint: () => {
        console.log('before print')
      },
      handleAfterPrint: (pageNum) => {
        console.log('after print, total page: ' + pageNum)
      }
    }
  }
}

<style scoped lang="scss">
.print-wrapper .line-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
@media print { // y
  .bg-imgs {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    .bg-imgs__bubble {
      display: block;
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
    }
    .bg-imgs__wave {
      position: absolute;
      display: block;
      width: 100%;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
</style>

Use

Props

Methods

Slots

Run

# 克隆仓库到本地
git clone https://github.com/bljessica/vue-j-print.git

# 切换到项目目录
cd vue-j-print

# 安装依赖
yarn

# 运行
yarn serve