Vue 输出 HTML 打印

Vue 输出 HTML 打印

Vue HTML to Paper

Vue mixin用于纸张打印html元素。

演示版

https://mycurelabs.github.io/vue-html-to-paper/

安装

NPM

npm install vue-html-to-paper

yarn

yarn add vue-html-to-paper

CDN

https://unpkg.com/vue-html-to-paper/build/vue-html-to-paper.js

用法

main.js

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

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'
  ]
}

Vue.use(VueHtmlToPaper, options);

// or, using the defaults with no stylesheet
Vue.use(VueHtmlToPaper);

请参阅此处的window.openAPI 。

组件形式

<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 () {
      // Pass the element id here
      this.$htmlToPaper('printMe');
    }
  }
}
</script>

带有本地选项

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'
  ]
}

返回值

打印完成后（无论是否成功），请使用回调函数来通知。不需要回调方法。

笔记

使用回调时，请注意，本地选项现在有第二个参数。因此，回调将是第三个参数。null如果您不想覆盖全局选项，则作为第二个参数传递。

this.$htmlToPaper('printMe', null, () => {
  console.log('Printing completed or was cancelled!');
});

常问问题

如何横向打印

在全局选项中，可以通过以下方式传递css：

@media print {
  @page {
    size: landscape
  }
}

然后，将自定义css注入样式选项中，如下所示：

const options = {
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    './path/to/custom.css' // <- inject here
  ]
}

这也可以通过使用local选项来完成。

Made with ❤️ by Jofferson Ramirez Tiquez 翻译 sweetwisdom