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

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

在这个主题上，三个Vue插件看起来很有趣： 1.d 2.vue-print-nb 3.html-to-paper

在三个选项中，只有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)

欢迎任何建议。

---

谢谢

我已经尝试了这三种方法，我认为最好的一种方法不是专门针对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>

从“打印js”导入打印；
导出默认值{
方法：{
印刷（）{
常量样式=
“@page{margin top:400px}@media print{h1{color:blue}}”；
const headerStyle=“font-weight:300；”；
printJS({
可打印：“rrr”，
键入：“html”，
标题：“医生姓名”，
头型：头型，
风格：风格，
扫描样式：错误，
onPrintDialogClose:（）=>console.log（“打印对话框已关闭”），
onError:e=>console.log（e）
});
},
打印访问（id）{
本文件（“rrr”）；
此.$HTMLOTAPPER（“rrr”，（）=>{
日志（“打印已完成或已取消！”）；
});
}
}
};

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

CDN

本地CSS文件 假设您正在从

http://localhost:8080/somepage

这将尝试打开

http://localhost:8080/somepage/myPrint.css

。显然，这将无法访问打印对话

解决方案

将自定义CSS文件放在公共或静态文件夹中（通常保存favicon的地方）

在选项中修改脚本路径，在服务器basepath前面添加CSS文件

示例选项

从“vue html导入纸张”
/*这将根据您的服务器而改变*/
让basePathhttp://localhost:8080';
常量选项={
名称：“\u blank”，
规格：[
'全屏=是'，
“标题栏=是”，
'滚动条=否'
],
风格：[
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
`${basePath}/myPrint.css`
]
}
Vue.use（VueHTMLOpaper，选项）

---

另外，访问根相对路径的最简单方法是使用

/

。用户

/style.css

而不是

/style.css

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