使用Vue.JS打印插件自定义打印样式
使用Vue.JS打印插件自定义打印样式
提问于 2019-01-29 14:55:36
我正在尝试使用自定义打印样式打印VueJS组件。
关于这个主题，有三个Vue插件看起来很有趣: 1.printd 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)欢迎任何建议。谢谢
回答 2
Stack Overflow用户
发布于 2019-09-05 07:19:27
这三个我都试过了，我认为最好的是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>Stack Overflow用户
发布于 2020-08-28 20:52:12
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)
- Modify脚本路径，在服务器基本路径前附加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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54415413
复制相关文章
相似问题
腾讯云开发者
