import { BoardManager } from './boardManager' ; import { LoadSave } from './LoadSave' ; import { Layout } from './Layout' ; import { CircularMenu } from './CircularMenu' ; import html2canvas from 'html2canvas' ; import jspdf from 'jspdf' ; description export class Export { description static init ( ) { document . getElementById ( "exportPng" ) . onclick = Export . exportPng ; document . getElementById ( "exportPdf" ) . onclick = Export . exportPdf ; } description static async exportPng ( ) { CircularMenu . hideAndRemove ( ) ; Layout . setForExportPng ( ) ; const bigCanvas = await Export . getCanvasBoard ( ) ; console . log ( BoardManager . width ) ; const canvas = Export . extractFromCanvas ( bigCanvas , 0 , BoardManager . width ) ; LoadSave . downloadDataURL ( ( < HTMLInputElement > document . getElementById ( "exportPngName" ) ) . value + ".png" , canvas . toDataURL ( ) ) ; Layout . restoreForUse ( ) ; } param bigCanvas param x param w returns private static extractFromCanvas ( bigCanvas , x , w ) { const canvasPage = document . createElement ( "canvas" ) ; const h = Layout . getWindowHeight ( ) ; console . log ( bigCanvas . height ) ; canvasPage . height = h ; canvasPage . width = w ; const scaleCorrection = bigCanvas . height / h ; canvasPage . getContext ( "2d" ) . drawImage ( bigCanvas , x * scaleCorrection , 0 , w * scaleCorrection , h * scaleCorrection , 0 , 0 , w , h ) ; return canvasPage ; } returns private static getCanvasBoard ( ) { const nodeContent = document . getElementById ( "content" ) ; return new Promise ( ( resolve ) => { html2canvas ( nodeContent ) . then ( canvas => resolve ( canvas ) ) ; } ) ; } description static async exportPdf ( ) { console . log ( "export in PDF starting..." ) ; CircularMenu . hideAndRemove ( ) ; Layout . setForExportPng ( ) ; const severalSlides = BoardManager . timeline . isSeveralSlides ( ) ; console . log ( severalSlides ? "there are several slides, it is a presentation. We make one slide on page in the PDF" : "there are no slides. We split the board in pieces, there may be several pages." ) ; const t = BoardManager . timeline . getCurrentIndex ( ) ; await BoardManager . timeline . setCurrentIndex ( 0 ) ; console . log ( "the width of the board is: " + BoardManager . width ) ; const doc = severalSlides ? new jspdf ( 'l' , 'px' , [ BoardManager . width , 1000 ] ) : new jspdf ( 'l' ) ; let firstpage = true ; while ( ! BoardManager . timeline . isEnd ( ) ) { console . log ( severalSlides ? "treating next slide..." : "beginning of the process" ) ; await BoardManager . timeline . nextPausedFrame ( ) ; const canvas = await Export . getCanvasBoard ( ) ; if ( severalSlides ) { if ( ! firstpage ) doc . addPage ( ) ; const ph = doc . internal . pageSize . getHeight ( ) ; const h = canvas . height ; const w = canvas . width ; doc . addImage ( canvas , 'png' , 0 , 0 , ph * w / h , ph ) ; } else { for ( let x = 0 ; x < BoardManager . width ; x += Layout . getWindowWidth ( ) ) { if ( ! firstpage ) doc . addPage ( ) ; const canvasPage = Export . extractFromCanvas ( canvas , x , Layout . getWindowWidth ( ) ) ; const pw = doc . internal . pageSize . getWidth ( ) ; const ph = doc . internal . pageSize . getHeight ( ) ; const h = canvasPage . height ; const w = canvasPage . width ; if ( w / h > pw / ph ) doc . addImage ( canvasPage , 'png' , 0 , 0 , pw , pw * h / w ) ; else doc . addImage ( canvasPage , 'png' , 0 , 0 , ph * w / h , ph ) ; firstpage = false ; } } firstpage = false ; } doc . save ( ( < HTMLInputElement > document . getElementById ( "exportPngName" ) ) . value + ".pdf" ) ; BoardManager . timeline . setCurrentIndex ( t ) ; Layout . restoreForUse ( ) ; } }