Здравствуйте, у меня vue3
Есть какой-то компонент, в нем CKEditor, в нем я накидываю какой-то текст, с отступами, списками, таблицами и тд и тп,
у CKEditor есть свои плагины, а у плагинов свои стили, они (стили) подключаются сами и все хорошо.
У меня задача вывести на печать созданный документ, делаю я это через новое окно, вот так:
preview() {
const width = Math.floor(window.innerWidth * 0.5);
const height = Math.floor(window.innerHeight * 0.8);
const left = (window.innerWidth - width) / 2;
const top = (window.innerHeight - height) / 2;
const fakeWindow = window.open('', this.$page.props.print_form.title, `height=${height}, width=${width}, top=${top}, left=${left}`);
const style= `<style>
img{width: 100%; max-width: 100%}
table{width: 100%;border-spacing: 0}
figure{margin: 0}
@page {size: A4 portrait;}
.ck-content .text-tiny {font-size: .7em}
.ck-content .text-small {font-size: .85em}
.ck-content .text-big {font-size: 1.4em}
.ck-content .text-huge {font-size: 1.8em}
</style>`;
const page = `<table>
<thead><tr><td>
<div id="header"> </div>
</td></tr></thead>
<tbody><tr><td>
<div class="content ck-content">${this.form.body}</div>
</td></tr></tbody>
<tfoot><tr><td>
<div id="footer" > </div>
</td></tr></tfoot>
</table>
<div id="header-content" class="ck-content" style="position: fixed; width: 100%; top: 0;">${this.form.header}</div>
<div id="footer-content" class="ck-content" style="position: fixed; width: 100%; bottom: 0;">${this.form.footer}</div>`;
fakeWindow.document.write(`<html><head>${style}</head><body>${page}</body></html>`);
fakeWindow.document.close();
fakeWindow.onafterprint = () => {
// fakeWindow.close();
}
fakeWindow.onload = () => {
const hHeader = fakeWindow.document.getElementById('header-content').offsetHeight;
const hFooter = fakeWindow.document.getElementById('footer-content').offsetHeight;
fakeWindow.document.getElementById('header').style.height = `${hHeader}px`;
fakeWindow.document.getElementById('footer').style.height = `${hFooter}px`;
fakeWindow.print();
}
fakeWindow.focus();
}
Как видно, у меня хардкодом прямо стили, но их достаточно много получается, все они из
- @ckeditor/ckeditor5-font/theme/fontsize.css
- @ckeditor/ckeditor5-table/theme/table.css
- @ckeditor/ckeditor5-image/theme/image.css
- @ckeditor/ckeditor5-image/theme/imagestyle.css
но я не могу понять как до них достучаться?
в идиале мне бы получит их содержимое и вставить в мое новое окно
или не их, или создать свой css туда их все заинклюдить, потом переопределить что-то и получить контент, а далее этот контент "напечатать" в style моего нового окна, как такое сделать или как-то иначе можно задачу решить?
