[web_demo] 异步渲染pdf页面，修复特殊文档页面渲染问题

src/components/PdfPreview.vue

@@ -99,6 +99,8 @@ async function convertCanvasToFile(canvas: HTMLCanvasElement, fileName: any) {
     return file;
 }
 
+let renderTask: any = null;
+
 function getPdfImage(index: number) {
     loadingTask.promise.then((pdf: any) => {
         state.numPages = pdf.numPages;
@@ -116,28 +118,37 @@ function getPdfImage(index: number) {
 
             show_canvas.value.style.height = destWidth * (viewport.height / viewport.width) + 'px';
             const ctx = hide_canvas.value.getContext('2d');
-            page.render({
+
+            if (renderTask && !renderTask.cancelled) {
+                renderTask.cancel();
+            }
+
+            renderTask = page.render({
                 canvasContext: ctx,
                 viewport,
             });
-            hide_canvas.value.toBlob(function (blob: any) {
-                pdf_img.value = dataURLtoBlob(hide_canvas.value.toDataURL('images/png', 1.0))
-                show_image.value.src = hide_canvas.value.toDataURL('images/png', 1.0);
-                show_image.value.onload = () => {
-                    show_canvas.value.width = show_image.value.width;
-                    show_canvas.value.height = show_image.value.height;
-                    convertCanvasToFile(hide_canvas.value, "pdf.png").then(result => {
-                        if (is_pdf.value == true) {
-                            input_file.value = result;
+            renderTask.promise.then(() => {
+                hide_canvas.value.toBlob(function (blob: any) {
+                    pdf_img.value = dataURLtoBlob(hide_canvas.value.toDataURL('images/png', 1.0))
+                    show_image.value.src = hide_canvas.value.toDataURL('images/png', 1.0);
+                    show_image.value.onload = () => {
+                        show_canvas.value.width = show_image.value.width;
+                        show_canvas.value.height = show_image.value.height;
+                        convertCanvasToFile(hide_canvas.value, "pdf.png").then(result => {
+                            if (is_pdf.value == true) {
+                                input_file.value = result;
+                            }
+                        });
+                        if (fabric_canvas.value != null) {
+                            fabric_canvas.value.dispose();
+                            fabric_canvas.value = null;
                         }
-                    });
-                    if (fabric_canvas.value != null) {
-                        fabric_canvas.value.dispose();
-                        fabric_canvas.value = null;
+                        fabric_canvas.value = new fabric.Canvas(show_canvas.value);
+                        fabric_canvas.value.clear()
                     }
-                    fabric_canvas.value = new fabric.Canvas(show_canvas.value);
-                    fabric_canvas.value.clear()
-                }
+                });
+            }).catch((error: any) => {
+                console.error('渲染出错', error);
             });
         })
     });