Converting DOCX file to PDF and load it to the WebViewer in Angular app

Technical Support WebViewer
, ,
1

Hello, since PDF files can be edited programmatically, (not DOCX files) I thought I might try converting the DOCX file to PDF and load it to the WebViewer. I found this resource docx to pdf. And my problem is I cant implement it in my angular application. The part of my code:

loadFile() {
    let downloadUrl = `/nes.s.Web/download?d=true&f=${this.fileDetail.attachFileId}`;
    if (this.companyCodeForDownload) {
      downloadUrl += `&c=${this.companyCodeForDownload}`;
    }

    if (this.fileDetail.privType === 'S') {
      downloadUrl += `&sysfile=true`;
    }

    // const licenseKey = ''
    // demo:1736481913433:7e8ff7c4030000000006e2d789e26c72e9ae279e11fbdce04d7b972ff3
    WebViewer({
      path: '/assets/apryse',
      enableFilePicker: true,
    }, this.viewer.nativeElement).then(instance => {
      //instance.UI.loadDocument(downloadUrl, { extension: 'pdf' });
      console.log(instance);
      this.wvInstance = instance;

      const { documentViewer, annotationManager, Annotations } = instance.Core;

      this.wvInstance.Core.setWorkerPath('/assets/apryse/core');
      this.wvInstance.Core.PDFNet.initialize().then(() => {
        console.log('here')
        this.loadDocxAsPDF(downloadUrl);
      })
          
    }
    )
  }

  loadDocxAsPDF(docxUrl: string): void {
    if (!this.wvInstance) {
      console.error("WebViewer instance is not initialized.");
      return;
    }

    this.convertOfficeToPDF(docxUrl).subscribe({
      next: (pdfDoc) => {
        console.log("PDF conversion successful:", pdfDoc);
     
        this.wvInstance!.UI.loadDocument(pdfDoc, { extension: "pdf" });
        
      },
      error: (error) => {
        console.error("Error during PDF conversion:", error);
      },
      complete: () => {
        console.log("PDF conversion complete.");
      },
    });
  }
      
  
  convertOfficeToPDF(downloadUrl: string): Observable<Core.PDFNet.PDFDoc> {
    return from(this.wvInstance.Core.PDFNet.Convert.office2PDF(downloadUrl, {}));
  }

    public saveDocument() {
        if (this.wvInstance) {
          const doc = this.wvInstance.Core.documentViewer.getDocument();
      
            if (doc) {
               
            const fileDataObservable: Observable<ArrayBuffer> = from(doc.getFileData({}));
      
            fileDataObservable.subscribe(
              (fileData) => {
                // Convert to Blob with .docx MIME type
                const blob = new Blob([fileData], {
                  type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                });
      
                // Create a File object for uploading
                const file = new File([blob], 'sampleDocument.docx', { type: blob.type });
      
                // Run the upload task
                this.runTask(
                  () => {
                    return this.uploadService
                      .upload(
                        file,
                        this.fileDetail.uploadPath ? this.fileDetail.uploadPath : this.generatePath(),
                        100,
                        0,
                        false,
                        this.fileDetail.privType === 'S'
                      )
                      .pipe(
                        tap((attachId) => {
                          console.log(attachId);
                          this.fileDetail.attachFileId = attachId;
      
                          // Update template file details
                          this.service.updateTemplateFileDetail(this.fileDetail).subscribe({
                            next: (res) => {
                              this.success('DOT-S.COMMON.success');
                            },
                            error: (err) => {
                              this.error(err);
                            },
                          });
                        }),
                        catchError((err) => {
                          this.error(err);
                          throw err;
                        })
                      );
                  },
                  { showBlocker: true, showError: true }
                );
              },
              (error) => {
                console.error('Error saving document:', error);
              }
            );
          } else {
            console.error('No document loaded');
          }
        } else {
          console.error('WebViewer instance is not initialized');
        }
    }
2

Hello Altai,

Thank you for contacting Apryse forums.

You are right that we currently can’t programmatically edit DOCX files in WebViewer. What error message are you getting in the console when running this code and what version of WebViewer are you on?

Could you try implementing the conversion using the following example?

      const { PDFNet } = instance.Core;
      const { Core, UI } = instance;
      await PDFNet.initialize();

      // Convert the Office file to a PDF buffer
      const pdfBuffer = await Core.officeToPDFBuffer('path-to-file', {
        extension: 'docx'
      });

      // Load the PDF buffer into WebViewer
      UI.loadDocument(pdfBuffer, { filename: 'converted.pdf' });

Best Regards,
Darian

3

We also have the feature request for programmatically editing DOCX files in our backlog. Could you let us know why you need this functionality and your use case?

4

Thanks for the response, we are trying to make some type of document generating feature in our app. So the document templates are in docx format. And there are some data that can be used as placeholder values in the document, and we are making a feature that lets users either click those values or just drag and drop them in the editor, and then the editor will have the data in the document editor either in the position of the cursor or on the x and y coordinate of user’s dropping.

1 Like
5 
loadFile() {
    let downloadUrl = `/nes.s.Web/download?d=true&f=${this.fileDetail.attachFileId}`;
    if (this.companyCodeForDownload) {
      downloadUrl += `&c=${this.companyCodeForDownload}`;
    }

    if (this.fileDetail.privType === 'S') {
      downloadUrl += `&sysfile=true`;
    }

    // const licenseKey = ''
    // demo:1736481913433:7e8ff7c4030000000006e2d789e26c72e9ae279e11fbdce04d7b972ff3
    WebViewer({
      path: '/assets/apryse',
      enableFilePicker: true,
    }, this.viewer.nativeElement).then(async (instance) => {
      instance.UI.enableFeatures([instance.UI.Feature.ContentEdit]);
      //instance.UI.loadDocument(downloadUrl, { extension: 'pdf' });
      console.log(instance);
      this.wvInstance = instance;

      const { documentViewer, annotationManager, Annotations, PDFNet } = instance.Core;
      const { Core, UI } = instance;
      
      await PDFNet.initialize();
      
      const pdfBuffer = await PDFNet.Convert.office2PDF(downloadUrl, {
        extension: 'docx'
      })

      UI.loadDocument(pdfBuffer, { filename: 'converted.pdf' });
    }
    )
  }

the console log error was

pdferror
pdferror1364×327 22.1 KB

and by the way,

const pdfBuffer = await Core.officeToPDFBuffer('path-to-file', {
        extension: 'docx'
      });

this code from your response my editor was saying Core does not have this officeToPDFBuffer method. And my @pdftron/webviewer version is 11.2.0

1 Like
6

Hello Altai,

A simpler way to load the file as a PDF is use the loadAsPDF option for loadDocument.

instance.UI.loadDocument('test.docx', { loadAsPDF: true });

This will do all the conversion for you under the hood.

Thank you for describing your use case. I will let the product team know about your interest in programmatically editing DOCX files.

1 Like
7

Hello Altai,

We also offer Document Generation using Text/Image Template. You could consider using this feature as it sounds similar to your use case.

2 Likes