fix(pdf): preview error in background layer

Author: Novout

src/components/editor/pdf/PDFPreview.vue

@@ -13,19 +13,25 @@
       />
     </svg>
   </HeroIcon>
-  <div ref="preview" class="w-1/2 h-1/2"></div>
+  <div ref="preview" class="h-1/2"></div>
 </template>
 
 <script setup lang="ts">
   import { usePDF } from '@/use/pdf'
   import { ref, onMounted } from 'vue'
   import { useStore } from 'vuex'
+  import { useI18n } from 'vue-i18n'
+  import { useToast } from 'vue-toastification'
 
   const preview = ref<HTMLElement | null>(null)
   const store = useStore()
+  const { t } = useI18n()
+  const toast = useToast()
 
   onMounted(() => {
     usePDF().external(store).onPreviewPDF(preview.value)
+
+    toast.error(t('toast.pdf.previewProblems'))
   })
 
   const onClick = () => {

src/lang/br/index.ts

@@ -1,7 +1,9 @@
 import editor from './editor'
+import toast from './toast'
 
 export default {
   editor,
+  toast,
   generics: {
     input: {
       image: 'Inserir Imagem',

src/lang/br/toast.ts

@@ -0,0 +1,6 @@
+export default {
+  pdf: {
+    previewProblems:
+      'Certas features não irão aparecer no preview para evitar problemas de desempenho.',
+  },
+}

src/lang/en/index.ts

@@ -1,7 +1,9 @@
 import editor from './editor'
+import toast from './toast'
 
 export default {
   editor,
+  toast,
   generics: {
     input: {
       image: 'Insert Image',

src/lang/en/toast.ts

@@ -0,0 +1,6 @@
+export default {
+  pdf: {
+    previewProblems:
+      'Certain features will not appear in the preview to avoid performance issues.',
+  },
+}

src/main.ts

@@ -20,7 +20,7 @@ app.use(i18n)
 app.use(vfmPlugin)
 app.use(Toast, {
   position: POSITION.TOP_CENTER,
-  timeout: 2000,
+  timeout: 4000,
   maxToasts: 3,
 })
 

src/use/pdf.ts

@@ -377,7 +377,7 @@ export const usePDF: Callback<any> = () => {
     return { content, styles, base }
   }
 
-  const doc = (store: Store<any>) => {
+  const doc = (store: Store<any>, options: Record<any, any>) => {
     return {
       pageSize: generate().base(store).pageSize,
       pageOrientation: generate().base(store).pageOrientation,
@@ -400,23 +400,25 @@ export const usePDF: Callback<any> = () => {
         'heading-one': generate().styles(store).headingOne(),
         paragraph: generate().styles(store).paragraph(),
       },
-      background: function (currentPage: number) {
-        return store.state.pdf.styles.switcher.main &&
-          store.state.pdf.styles.base.background.main &&
-          currentPage >= 3
-          ? [
-              {
-                image: store.state.pdf.styles.base.background.main,
-                width: useDefines().pdf().base().pageSizeFixes()[
-                  store.state.pdf.styles.base.pageSize
-                ][0],
-                height: useDefines().pdf().base().pageSizeFixes()[
-                  store.state.pdf.styles.base.pageSize
-                ][1],
-              },
-            ]
-          : undefined
-      },
+      background: options.final
+        ? function (currentPage: number) {
+            return currentPage >= 3 &&
+              store.state.pdf.styles.base.background.main &&
+              store.state.pdf.styles.switcher.main
+              ? [
+                  {
+                    image: store.state.pdf.styles.base.background.main,
+                    width: useDefines().pdf().base().pageSizeFixes()[
+                      store.state.pdf.styles.base.pageSize
+                    ][0],
+                    height: useDefines().pdf().base().pageSizeFixes()[
+                      store.state.pdf.styles.base.pageSize
+                    ][1],
+                  },
+                ]
+              : undefined
+          }
+        : undefined,
       footer: function (
         currentPage: number,
         pageCount: number,
@@ -479,7 +481,7 @@ export const usePDF: Callback<any> = () => {
   const create: Callback<any> = (store: Store<any>): void => {
     setVfsFonts(store)
 
-    const pdf = pdfMake.createPdf(doc(store))
+    const pdf = pdfMake.createPdf(doc(store, { final: true }))
 
     pdf.download(`${store.state.project.nameRaw}.pdf`, () => {
       store.commit('absolute/load', false)
@@ -492,7 +494,7 @@ export const usePDF: Callback<any> = () => {
   ): void => {
     setVfsFonts(store)
 
-    const generator = pdfMake.createPdf(doc(store))
+    const generator = pdfMake.createPdf(doc(store, { final: false }))
 
     generator.getDataUrl((dataUrl: any) => {
       const iframe = document.createElement('iframe')