Tan*_*may 12 javascript printing vue.js
我想从 vue 组件打印一些内容。例如，从以下代码段中，我想打印v-card-textid 为的元素#print：
new Vue({
el: '#app',
data() {
return {
dialog: false
}
},
methods: {
print() {
var prtContent = document.getElementById("print");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
}
})<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" />
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="290">
<v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
<v-card>
<v-card-title class="headline">Print This:</v-card-title>
<v-card-text id="print">Lorem ipsum dolor sit amet.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat @click.native="print">Print</v-btn>
</v-card>
</v-dialog>
</v-layout>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>
</html>但是，当我收到打印提示时，与之相关的所有样式都消失了。如何以这种方式打印 vue 组件，以便组件不会丢失关联的样式？我建议将代码片段复制到您的本地机器以获得最佳效果。
Dec*_*oon 18
您需要从原始文档中复制样式。尝试这样的事情：
// Get HTML to print from element
const prtHtml = document.getElementById('print').innerHTML;
// Get all stylesheets HTML
let stylesHtml = '';
for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
stylesHtml += node.outerHTML;
}
// Open the print window
const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(`<!DOCTYPE html>
<html>
<head>
${stylesHtml}
</head>
<body>
${prtHtml}
</body>
</html>`);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
小智 5
安装这个包vue-html-to-paper
npm install vue-html-to-paper
用法：
import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=yes'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css'
]
}
Vue.use(VueHtmlToPaper, options);
// or, using the defaults with no stylesheet
Vue.use(VueHtmlToPaper);
成分：
<template>
<div>
<!-- SOURCE -->
<div id="printMe">
<h1>Print me!</h1>
</div>
<!-- OUTPUT -->
<button @click="print"></button>
</div>
<template>
<script>
export default {
data () {
return {
output: null
}
},
methods: {
print () {
// Pass the element id here
this.$htmlToPaper('printMe');
}
}
}
</script>
更多细节检查：https : //randomcodetips.com/vue-html-to-paper/
| 归档时间： |
|
| 查看次数： |
25308 次 |
| 最近记录： |