Question

我正在尝试使用自定义打印样式打印VueJS组件。

关于这个主题，三个Vue插件看起来很有趣： 1.印刷 2.vue-print-nb 3.html-to-paper

只有三个html-to-paper文件中有一个options对象，该对象可以传递自定义的CSS样式，以便动态传递某些打印CSS。

我的问题是我似乎无法加载自定义的CSS，而且在执行打印操作时也会弄错引导类。

这基本上就是我在做的事。

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

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

Vue.use(VueHtmlToPaper, options)

任何建议都值得欢迎。谢谢

Answer 1

我已经尝试了所有这三个，我认为最好的一个是print.js，它不是专门针对Vue.js的，但是可以很容易地在vue组件中安装和使用。

例如

<script>
import print from "print-js";
export default {
  methods: {
    printing() {
      const style =
        "@page { margin-top: 400px } @media print { h1 { color: blue } }";
      const headerStyle = "font-weight: 300;";
      printJS({
        printable: "rrr",
        type: "html",
        header: "Doctor Name",
        headerStyle: headerStyle,
        style: style,
        scanStyles: false,
        onPrintDialogClose: () => console.log("The print dialog was closed"),
        onError: e => console.log(e)
      });
    },
    printVisit(id) {
      this.$htmlToPaper("rrr");
      this.$htmlToPaper("rrr", () => {
        console.log("Printing completed or was cancelled!");
      });
    }
  }
};
</script>

Answer 2

VueHtmlToPaper打开一个带有其自己的样式标签的新窗口。因此，当您传递CDN时，它可以工作，如果您传递本地文件，则不是因为它试图访问Web服务器中的资源，而是访问了错误的URL。让我们看看使用CDN和本地CSS文件时页面的外观。

CDN

<html>
  <head>
    <link rel="style" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  </head>
  <body>
  </body>
</html>

本地CSS文件

假设您正在从http://localhost:8080/somepage调用打印功能

<html>
  <head>
    <link rel="style" href="./myPrint.css">
    </head>
  <body>
  </body>
</html>

这将尝试打开http://localhost:8080/somepage/myPrint.css。显然，打印对话将无法访问。

解决方案

将您的自定义CSS文件放在公共或静态文件夹中（通常保存favicon的位置）
修改选项中的脚本路径，在服务器基本路径前添加CSS文件

样本选项

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

/* This will change according to your server */
let basePath= 'http://localhost:8080';

const options = {
  name: '_blank',
  specs: [
   'fullscreen=yes',
   'titlebar=yes',
   'scrollbars=no'
  ],
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    `${basePath}/myPrint.css`
  ]
}

Vue.use(VueHtmlToPaper, options)

此外，访问根相对路径的最简单方法是使用/。用户/style.css而非./style.css

使用Vue.JS打印插件自定义打印样式

2 个答案:

CDN

本地CSS文件

解决方案

样本选项