1

I have requirement where i need to convert docx file data into html to make that editable in lwc component . For this use case I am using method 'convertToHtml' method from mammoth library . But getting the error . The code i am using is below

handleFilesChange(blobData) {
   console.log('method called '+blobData);           
            if (window.mammoth) {
                console.log('Mammoth is accessible');
                console.log(JSON.stringify(window.mammoth));
            } else {
                console.error('Mammoth is not accessible');
            }
            window.mammoth.convertToHtml({blob: blobData})
                .then((result) => {
                    
                    console.log('html data =='+JSON.stringify(result.value));
                   // this.template.querySelector('.output').innerHTML = result.value;
                })
                .catch(err =>{console.log('4');
                console.log(err)});
       
}

I have already imported mammoth library as static resource

import MAMMOTH_JS from "@salesforce/resourceUrl/mammothJS";

Error message (Although that would not give any help that's why I did not add): Proxy(Object) {} Update: I just consoled the window.mammoth and it generated :

{"images":{},"transforms":{},"underline":{}}

Did not understand the issue here ?

updated code ==>

convert(blob) {
        const reader = new FileReader();
        console.log('convert==='+JSON.stringify(blob));
        try {
            new Promise((resolve, reject) => {
            reader.onload = () => {resolve(
                
              // console.log('convert==='+JSON.stringify(blob));
               window.mammoth.convertToHtml({ arrayBuffer : reader.result })
               .then((result) => {
                   console.log('html data == ', result.value);
                   // this.template.querySelector('.output').innerHTML = result.value;
               })
               .catch(err =>{
                   console.error(err);
               }));
            }

           reader.readAsArrayBuffer(blob);
           reader.onerror = (error) => reject(
            console.log('error ='+error)
           );
        });
            
        } catch (error) {
            console.error('catch error ='+JSON.stringify(err));
        }
        
    }
5
  • What error do you get? Please edit to add exact wording.
    – Phil W
    Mar 13 at 12:04
  • Lightning Locker or Lightning Web Security? Mar 13 at 12:59
  • how to check those @FelixvanHove ? Mar 13 at 13:24
  • Setup - Security - Session Settings - "Lightning Web Security". Mar 13 at 13:31
  • @FelixvanHove hard luck, still getting the same results after disabled the "Lightning Web Security" Mar 13 at 13:36

1 Answer 1

0

My question in the comments (regarding the Lightning security you use) was a bit rash. The Mammoth lib works both with Locker and with LWS.

I'm not sure which Mammoth version you use, but I tested with 1.2.5. Scanning the front page of the Github repo doesn't surface a "blob" attribute of the object passed to the convertToHtml method. Here's a POC with the corrected attribute:

Javascript:

import { LightningElement } from 'lwc';
import { loadScript } from "lightning/platformResourceLoader";
import MAMMOTH_JS from "@salesforce/resourceUrl/mammothJS";

export default class MammothTest extends LightningElement {

    connectedCallback() {
        loadScript(this, MAMMOTH_JS)
        .catch(e => console.error('Mammoth not loaded: ', e));
      }

    handleFilesChange(event) {
        this.convert(event.detail.files[0]);
    }

    convert(blob) {
        const reader = new FileReader();
        reader.onload = () => {
            window.mammoth.convertToHtml({ arrayBuffer : reader.result })
            .then((result) => {
                console.log('html data == ', result.value);
                // this.template.querySelector('.output').innerHTML = result.value;
            })
            .catch(e =>{
                console.error(e);
            });
        }
        reader.readAsArrayBuffer(blob);
    }
}

HTML:

<template>
    <lightning-input type="file" label="Select docx file..." onchange={handleFilesChange}></lightning-input>
</template>

Interestingly, fed with the wrong data, convertToHtml does not return. Fed with the right data however, it does what it's supposed to do. I saved a short text in Libre Office as "Word 2010-365 Document (*.docx)". Chrome's DevTools produced this:

html data == <p>Hello <strong>NewBaySales</strong>!</p>

6
  • Sorry i was little under the weather ,Anyways I have made update to the code but looks like it is not executing the reader.onload = () call ,@FelixvanHove Mar 19 at 5:56
  • Firstly, please don't update your original question in a way that the answer doesn't make much sense anymore. This isn't good for later readers. Secondly, what is the idea of the Promise that you added? Thirdly, - just copy the code I provided and you're done. It prints the html data... to the console. reader.onload is an event triggered by the execution of reader.readAsArrayBuffer(...), which indicates blob has been read. This can hardly fail. Mar 19 at 7:45
  • Copied and pasted the code that you provided but the reader is not executing . Mar 19 at 9:19
  • @NewBaySales, I replaced my answer with a complete proof of concept - check it out! :-) Mar 19 at 20:30
  • thank u very much @FelixvanHove , I was able to get the html code , Actually I think the issue was that I was using <lightning-file-upload ></lightning-file-upload> this and getting the blob data from apex . Mar 20 at 9:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .