Vue.js用于纸上打印HTML元素 – vue-html-to-paper

Vue.js用于纸上打印HTML元素 – vue-html-to-paper
插件名称 vue-html-to-paper
版本号 v1.4.3
发布时间 2020年4月8日
插件作者 mycurelabs

这是用于纸上打印HTML元素的Vue mixin。

安装和下载:

# Yarn
$ yarn add vue-html-to-paper

# NPM
$ npm install vue-html-to-paper --save

使用:

1.导入并安装vue-html-to-paper组件。

import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';

2.注册组件。

Vue.use(VueHtmlToPaper, options);
// 或者在没有样式表的情况下使用默认值
Vue.use(VueHtmlToPaper);

3.在您的模板应用中:

<template>
  <div>
    <!-- SOURCE -->
    <div id="printMe">
      <h1>Print me!</h1>
    </div>
    <!-- OUTPUT -->
    <button @click="print"></button>
  </div>
<template>
<script>
export default {
  data () {
    return {
      output: null
    }
  },
  methods: {
    print () {
      // 在此处传递元素id
      this.$htmlToPaper('printMe');
    }
  }
}
</script>

4.选项。

const options = {
  name: '_blank',
  specs: [
    'fullscreen=yes',
    'titlebar=yes',
    'scrollbars=yes'
  ],
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    'https://unpkg.com/kidlat-css/css/kidlat.css'
  ]
}

演示:

变更日志:

v1.4.3 (06/29/2021)

  • 重构:删除可选链接

v1.4.2 (06/24/2021)

  • 重构:新建

v1.4.1 (05/05/2021)

  • 杂务:添加新选项 windowTitle