diff --git a/core/packages/js-pdf/index.d.ts b/core/packages/js-pdf/index.d.ts index 6aa5357..e6d9694 100644 --- a/core/packages/js-pdf/index.d.ts +++ b/core/packages/js-pdf/index.d.ts @@ -15,6 +15,7 @@ export interface Options { export interface JsPdfPreview { preview: (src: string | ArrayBuffer | Blob) => Promise; + rerender: () => Promise; save: (fileName?: string) => void; setOptions: (options: Options) => void; setRequestOptions: (requestOptions?: any) => void; diff --git a/core/packages/js-pdf/package.json b/core/packages/js-pdf/package.json index 9d1f2e8..17bc4db 100644 --- a/core/packages/js-pdf/package.json +++ b/core/packages/js-pdf/package.json @@ -1,7 +1,7 @@ { "name": "@js-preview/pdf", "type" :"module", - "version": "1.5.0", + "version": "1.5.2", "description": "", "main": "lib/index.js", "files": [ diff --git a/core/packages/js-pdf/src/main.js b/core/packages/js-pdf/src/main.js index 581a666..a92431a 100644 --- a/core/packages/js-pdf/src/main.js +++ b/core/packages/js-pdf/src/main.js @@ -33,7 +33,11 @@ class JsPdfPreview{ this.wrapperMain.setAttribute('style', 'background: gray; padding: 30px 0;position: relative;'); this.wrapper.appendChild(this.wrapperMain); } - createCanvas(){ + createCanvas(num){ + let existCanvas = this.wrapperMain.querySelectorAll('canvas'); + if(existCanvas[num -1]){ + return [existCanvas[num -1], existCanvas[num -1].getContext('2d')]; + } const canvas = document.createElement('canvas'); canvas.setAttribute('style', 'width:100%'); this.wrapperMain.appendChild(canvas); @@ -64,7 +68,7 @@ class JsPdfPreview{ return this.pdfDocument.getPage(num).then((pdfPage) => { const viewport = pdfPage.getViewport({scale: 2}); const outputScale = window.devicePixelRatio || 1; - let [canvas, ctx] = this.createCanvas(); + let [canvas, ctx] = this.createCanvas(num); canvas.width = Math.floor(viewport.width * outputScale); canvas.height = Math.floor(viewport.height * outputScale); @@ -76,9 +80,10 @@ class JsPdfPreview{ domWidth = Math.floor(this.options.width); domHeight = Math.floor(domHeight * scale); } - if(domWidth > document.documentElement.clientWidth){ - let scale = document.documentElement.clientWidth / domWidth; - domWidth = Math.floor(document.documentElement.clientWidth); + let wrapperWidth = this.wrapperMain.getBoundingClientRect().width - 20; + if(domWidth > wrapperWidth){ + let scale = wrapperWidth / domWidth; + domWidth = Math.floor(wrapperWidth); domHeight = Math.floor(domHeight * scale); } @@ -96,7 +101,7 @@ class JsPdfPreview{ }); return renderTask.promise.then(() => { if (this.pdfDocument.numPages > num) { - this.renderSinglePage(num + 1); + return this.renderSinglePage(num + 1); } }); }); @@ -104,6 +109,13 @@ class JsPdfPreview{ renderPage(){ if(!this.wrapperMain){ this.createWrapperMain(); + }else{ + let canvas = this.wrapperMain.querySelectorAll('canvas'); + if(canvas.length > this.pdfDocument.numPages){ + for(let i = canvas.length-1; i >= this.pdfDocument.numPages; i--){ + this.wrapperMain.removeChild(canvas[i]); + } + } } return this.renderSinglePage(1); } @@ -145,6 +157,14 @@ class JsPdfPreview{ }); })); } + rerender(){ + return this.renderPage().then(_=>{ + return Promise.resolve(); + }).catch(e=>{ + this.clearAllCanvas(); + return Promise.reject(e); + }); + } save(fileName){ this.pdfDocument && this.pdfDocument._transport && this.pdfDocument._transport.getData().then(fileData=>{ downloadFile(fileName || `js-preview-pdf-${new Date().getTime()}.pdf`,fileData.buffer); diff --git a/core/packages/vue-pdf/index.d.ts b/core/packages/vue-pdf/index.d.ts index 02fd75b..4ca130d 100644 --- a/core/packages/vue-pdf/index.d.ts +++ b/core/packages/vue-pdf/index.d.ts @@ -1,6 +1,7 @@ declare const VueOfficePdf: { install?: (vue: any) => void; src: string|ArrayBuffer|Blob; + rerender: () => any; staticFileUrl?: string, requestOptions?: any; options?: any diff --git a/core/packages/vue-pdf/package.json b/core/packages/vue-pdf/package.json index b7d211a..79e6110 100644 --- a/core/packages/vue-pdf/package.json +++ b/core/packages/vue-pdf/package.json @@ -1,6 +1,6 @@ { "name": "@vue-office/pdf", - "version": "1.5.1", + "version": "1.5.2", "description": "", "main": "lib/index.js", "files": [ diff --git a/core/packages/vue-pdf/src/main.vue b/core/packages/vue-pdf/src/main.vue index 211c892..6be822b 100644 --- a/core/packages/vue-pdf/src/main.vue +++ b/core/packages/vue-pdf/src/main.vue @@ -30,6 +30,7 @@ export default defineComponent({ setup(props, { emit }) { let pdfDocument = null; let loadingTask = null; + const wrapperRef = ref(null); const rootRef = ref([]); const numPages = ref(0); @@ -107,9 +108,10 @@ export default defineComponent({ domWidth = Math.floor(props.options.width); domHeight = Math.floor(domHeight * scale); } - if (domWidth > document.documentElement.clientWidth) { - let scale = document.documentElement.clientWidth / domWidth; - domWidth = Math.floor(document.documentElement.clientWidth); + let wrapperWidth = wrapperRef.value.getBoundingClientRect().width - 20; + if (domWidth > wrapperWidth) { + let scale = wrapperWidth / domWidth; + domWidth = Math.floor(wrapperWidth); domHeight = Math.floor(domHeight * scale); } @@ -140,6 +142,9 @@ export default defineComponent({ } + function rerender(){ + renderPage(1); + } onMounted(() => { if (props.src) { checkPdfLib().then(init).catch(e => { @@ -159,10 +164,12 @@ export default defineComponent({ }); } return { + wrapperRef, rootRef, numPages, save, - onScrollPdf + onScrollPdf, + rerender }; } }); @@ -170,7 +177,7 @@ export default defineComponent({