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

【问题标题】：Custom print style with Vue.JS print plugin使用 Vue.JS 打印插件自定义打印样式
【发布时间】：2019-06-22 05:56:54
【问题描述】：

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

三个 Vue 插件在这个主题上看起来很有趣： 1.打印 2.vue-print-nb 3.html到纸

在这三个中，只有 html-to-paper 有一个选项对象，可以传递自定义 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)

欢迎提出任何建议。谢谢

【问题讨论】：

@caniakyouaquestion：你找到解决这个问题的方法了吗

标签： vue.js

【解决方案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>

【讨论】：

【解决方案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 文件放入公共或静态文件夹（您通常保存网站图标的位置）
在选项中修改脚本路径，在服务器基本路径前添加 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

【讨论】：