px7sihb6k
/
coeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复导出Word、PDF的一些bug, 仍有bug

Browse Source
master
joefalmko 1 month ago
parent 67f8a61501
commit 7a757634b4
1 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File

50
ckeditor5/src/App.vue
Unescape View File

@ -19,8 +19,8 @@
</template> </template>
<script> <script>
import { import {
DecoupledEditor, // DecoupledEditor,
// ClassicEditor, ClassicEditor,
AccessibilityHelp, AccessibilityHelp,
Alignment, Alignment,
Autoformat, Autoformat,
@ -114,6 +114,20 @@ import { saveAs } from 'file-saver';
// import Collection from "@ckeditor/ckeditor5-utils/src/collection"; // import Collection from "@ckeditor/ckeditor5-utils/src/collection";
// import {addListToDropdown,createDropdown} from "@ckeditor/ckeditor5-ui/src/dropdown/utils"; // import {addListToDropdown,createDropdown} from "@ckeditor/ckeditor5-ui/src/dropdown/utils";
// import SplitButtonView from "@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview"; // import SplitButtonView from "@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview";
// 将当前页面的样式转为内联
function getStyle(){
let str = '<head><meta charset="utf-8"></meta>';
const styles = document.querySelectorAll('style');
for(let i = 0; i < styles.length; i++){
str+=styles[i].outerHTML;
}
str += "<style>.results{width:100%!important;} .result .title{width:100%;}</style>";
str += "<style>table{border-collapse: collapse;table-layout: fixed}</style>"
// str += "<style>table thead tr{ background-color: #f3f4f9;}</style>"
str += "<style>table td,th{ font-size: 14px;padding: 1px 1px;border-width: 1px;border-style: solid;border-color: #d0d0d0;word-break: keep-all;white-space: nowrap;}</style>"
return str;
}
class Export2Word extends Plugin { class Export2Word extends Plugin {
init() { init() {
const editor = this.editor; const editor = this.editor;
@ -134,9 +148,10 @@ class Export2Word extends Plugin {
// Execute a callback function when the button is clicked // Execute a callback function when the button is clicked
button.on('execute', () => { button.on('execute', () => {
// console.log(editor.getData()); const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners > div.ck.ck-editor__main")
const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div").innerHTML; const style=getStyle();
const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + pageContent + '</body></html>' const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media print{@page{size:A4 portrait;margin:0cm 3cm}@page:left{margin-left:2.5cm;margin-right:2.7cm;}@page:right{margin-left:2.7cm;margin-right:2.5cm;}}</style>'+style+'</head><body>' + pageContent.outerHTML + '</body></html>'
// console.log(page); // console.log(page);
asBlob(page).then(data => { asBlob(page).then(data => {
saveAs(data, 'file.docx') // save as docx file saveAs(data, 'file.docx') // save as docx file
@ -186,31 +201,16 @@ class Export2PDF extends Plugin{
// Execute a callback function when the button is clicked // Execute a callback function when the button is clicked
button.on('execute', () => { button.on('execute', () => {
// console.log(editor.getData()); const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div.ck.ck-reset.ck-editor.ck-rounded-corners > div.ck.ck-editor__main");
const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div"); const style=getStyle();
// pageContent.className+=' print-content'; const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media print{@page{size:A4 portrait;margin:0cm 3cm}@page:left{margin-left:2.5cm;margin-right:2.7cm;}@page:right{margin-left:2.7cm;margin-right:2.5cm;}}</style>'+style+'</head><body>' + pageContent.outerHTML + '</body></html>'
const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media print{@page{size:A4 portrait;margin:0cm 3cm}@page:left{margin-left:2.5cm;margin-right:2.7cm;}@page:right{margin-left:2.7cm;margin-right:2.5cm;}}</style></head><body>' + pageContent.innerHTML + '</body></html>'
// console.log(page);
const newWindow = window.open('','PrintDocument', 'height=600,width=700,top=50,left=50'); const newWindow = window.open('','PrintDocument', 'height=600,width=700,top=50,left=50');
newWindow.document.write(page); newWindow.document.write(page);
newWindow.document.close(); newWindow.document.close();
// newWindow.document.addEventListener('afterprint', function () {
// // 打印完成（无论用户是真正打印还是取消打印）
// newWindow.close();
// }, false);
newWindow.onload = function(){
newWindow.print(); newWindow.print();
// // newWindow.close();
}
newWindow.onafterprint=function(){ newWindow.onafterprint=function(){
newWindow.close(); newWindow.close();
} }
// asBlob(page).then(data => {
// saveAs(data, 'file.docx') // save as docx file
// }); // asBlob() return Promise<Blob|Buffer>
}); });
return button; return button;
@ -293,8 +293,8 @@ export default {
return { return {
isLayoutReady: false, isLayoutReady: false,
config: null, // CKEditor needs the DOM tree before calculating the configuration. config: null, // CKEditor needs the DOM tree before calculating the configuration.
editor: DecoupledEditor // editor: DecoupledEditor
// editor:ClassicEditor editor:ClassicEditor
}; };
}, },
mounted() { mounted() {

Write Preview
Loading…
Cancel
Save