vue.js - 打印 vueJS 组件或转换为 pdf
问题描述
我有一个要打印的 vueJS 组件。但是,当我使用标准打印对话框时,我会丢失所有 CSS,并且基本上只有纯文本。
我也试过Printd。
我的代码大致如下:
mounted () {
this.cssText = `
.a4-paper {
height: 29cm;
width: 14cm;
}
h4, h3, h2, h1 {
text-align: center;
width: 100%;
}
label.underline {
border-bottom: solid black 1px;
height: 0.3cm;
width: 100%;
}`;
this.d = new Printd()
},
methods: {
show(event: Event) {
this.event = event;
this.visible = true;
},
print() {
this.d.print(this.$el, this.cssText)
}
}
但是,结果看起来与组件的呈现方式完全不同。我一直无法找到解决方案。有人可以帮助我吗?
解决方案
存在问题是因为 printd 创建了一个新的 Document 用于打印,因此样式不会传递到您正在引用的子组件中this.$el
我使用的解决方法是从当前文档的头部获取所有样式元素并将它们附加到printd
创建的文档中。将您的打印方法更改为以下内容;
print() {
const d = new Printd()
d.print(this.$el, this.cssText, (win, doc, node, launchPrint) => {
// Get style elements
const styles = [].slice.call(document.getElementsByTagName('style'))
// append them to the the new document head element
styles.forEach(styleElement => doc.head.appendChild(styleElement.cloneNode(true)))
launchPrint(win)
})
},
推荐阅读
- opencv - 姿势估计 - 带有 Scenekit 的 cv::SolvePnP - 坐标系问题
- swift - 如何为全局调用创建一个枚举预期的硬编码字符串
- c# - 我找不到为什么我的不记名令牌无效,它返回 401
- python-3.x - 如何使用spacy中的短语匹配器将字符串的引理与列表的引理匹配
- amazon-web-services - 向强调标签添加参数时,控制台返回 SSML 错误
- python-3.x - 如何使用班级计算学生的字母等级
- java - 我无法弄清楚二叉树插入方法中的逻辑问题
- python - 对情节在线/离线/袖扣和不同版本感到困惑
- python - 将列作为列表导入到列标题变量
- android - 将 Android Gradle 插件更新到 3.2.0 或更高版本/生成 Flutter 签名的 APK