@ -19,8 +19,8 @@
< / template >
< script >
import {
DecoupledEditor
/ / C l a s s i c E d i t o r
/ / D e c o u p l e d E d i t o r
ClassicEditor
AccessibilityHelp ,
Alignment ,
Autoformat ,
@ -114,6 +114,20 @@ import { saveAs } from 'file-saver';
/ / i m p o r t C o l l e c t i o n f r o m " @ c k e d i t o r / c k e d i t o r 5 - u t i l s / s r c / c o l l e c t i o n " ;
/ / i m p o r t { a d d L i s t T o D r o p d o w n , c r e a t e D r o p d o w n } f r o m " @ c k e d i t o r / c k e d i t o r 5 - u i / s r c / d r o p d o w n / u t i l s " ;
/ / i m p o r t S p l i t B u t t o n V i e w f r o m " @ c k e d i t o r / c k e d i t o r 5 - u i / s r c / d r o p d o w n / b u t t o n / s p l i t b u t t o n v i e w " ;
/ / 将 当 前 页 面 的 样 式 转 为 内 联
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>"
/ / s t r + = " < s t y l e > t a b l e t h e a d t r { b a c k g r o u n d - c o l o r : # f 3 f 4 f 9 ; } < / s t y l e > "
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 {
init ( ) {
const editor = this . editor ;
@ -134,9 +148,10 @@ class Export2Word extends Plugin {
/ / E x e c u t e a c a l l b a c k f u n c t i o n w h e n t h e b u t t o n i s c l i c k e d
button . on ( 'execute' , ( ) => {
/ / c o n s o l e . l o g ( e d i t o r . g e t D a t a ( ) ) ;
const pageContent = document . querySelector ( "#app > div > div > div > div.editor-container__editor-wrapper > div > div > div" ) . innerHTML ;
const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + pageContent + '</body></html>'
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 style = getStyle ( ) ;
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>'
/ / c o n s o l e . l o g ( p a g e ) ;
asBlob ( page ) . then ( data => {
saveAs ( data , 'file.docx' ) / / s a v e a s d o c x f i l e
@ -186,31 +201,16 @@ class Export2PDF extends Plugin{
/ / E x e c u t e a c a l l b a c k f u n c t i o n w h e n t h e b u t t o n i s c l i c k e d
button . on ( 'execute' , ( ) => {
/ / c o n s o l e . l o g ( e d i t o r . g e t D a t a ( ) ) ;
const pageContent = document . querySelector ( "#app > div > div > div > div.editor-container__editor-wrapper > div > div > div" ) ;
/ / p a g e C o n t e n t . c l a s s N a m e + = ' p r i n t - c o n t e n t ' ;
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>'
/ / c o n s o l e . l o g ( p a g e ) ;
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 style = getStyle ( ) ;
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 newWindow = window . open ( '' , 'PrintDocument' , 'height=600,width=700,top=50,left=50' ) ;
newWindow . document . write ( page ) ;
newWindow . document . close ( ) ;
/ / n e w W i n d o w . d o c u m e n t . a d d E v e n t L i s t e n e r ( ' a f t e r p r i n t ' , f u n c t i o n ( ) {
/ / / / 打 印 完 成 （ 无 论 用 户 是 真 正 打 印 还 是 取 消 打 印 ）
/ / n e w W i n d o w . c l o s e ( ) ;
/ / } , f a l s e ) ;
newWindow . onload = function ( ) {
newWindow . print ( ) ;
/ / / / n e w W i n d o w . c l o s e ( ) ;
}
newWindow . print ( ) ;
newWindow . onafterprint = function ( ) {
newWindow . close ( ) ;
}
/ / a s B l o b ( p a g e ) . t h e n ( d a t a = > {
/ / s a v e A s ( d a t a , ' f i l e . d o c x ' ) / / s a v e a s d o c x f i l e
/ / } ) ; / / a s B l o b ( ) r e t u r n P r o m i s e < B l o b | B u f f e r >
} ) ;
return button ;
@ -293,8 +293,8 @@ export default {
return {
isLayoutReady : false ,
config : null , / / C K E d i t o r n e e d s t h e D O M t r e e b e f o r e c a l c u l a t i n g t h e c o n f i g u r a t i o n .
editor : DecoupledEdito
/ / e d i t o r : C l a s s i c E d i t o
/ / e d i t o r : D e c o u p l e d E d i t o
editor : ClassicEdito
} ;
} ,
mounted ( ) {
