我们可以使用没有js库的javascript将docx文件转换为PDF吗

Question

我想创建 LWC 组件，其中我有一个文件选择器，它在 salesforce 中上传“.pdf”、“.png”、“.jpg”、“.jpeg”、“.docx”、“.doc”类型的文件.但是在单击按钮时，我希望将该文件转换为 PDF 并立即下载。 是否可以在 LWC 中使用 js 转换文件？

我得到了这段代码，但它只适用于包含 HTML 元素的字符串。我希望它适用于整个文件。

window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF();
    
// Source HTMLElement or a string containing HTML.
var elementHTML = document.querySelector("#content");

doc.html(elementHTML, {
    callback: function(doc) {
        // Save the PDF
        doc.save('sample-document.pdf');
    },
    margin: [10, 10, 10, 10],
    autoPaging: 'text',
    x: 0,
    y: 0,
    width: 190, //target width in the PDF document
    windowWidth: 675 //window width in CSS pixels
});

Answer 1

在不使用任何库的情况下使用纯 JavaScript 将 docx 文件转换为 PDF 可能具有挑战性，因为 JavaScript 没有对文档处理或 PDF 生成的内置支持。但是，结合使用浏览器 API 和一些第三方工具可能会实现这一点。

一种可能的方法是使用以下步骤：

1. 使用 FileReader API 读取 docx 文件的内容。

2. 使用 JSZip 库提取 docx 文件的内容。文档 文件格式本质上是一个包含多个文件的 zip 文件， 包括包含实际内容的 document.xml 文件。

3. 使用 DOMParser API 解析 document.xml 文件的内容 并生成 HTML 代码。

4. 使用 Canvas API 呈现 HTML 代码 到画布元素上。

5. 使用jsPDF库生成PDF 来自 canvas 元素的文档。

   下面是演示此方法的示例代码 sn-p：

   // Read the docx file
   const fileInput = document.querySelector('input[type="file"]');
   fileInput.addEventListener('change', (event) => {
     const file = event.target.files[0];
     const reader = new FileReader();
     reader.readAsArrayBuffer(file);
     reader.onload = () => {
       // Extract the contents of the docx file
       const zip = new JSZip();
       zip.loadAsync(reader.result).then((doc) => {
         const content = doc.files['word/document.xml'].async('string');
         content.then((docXml) => {
           // Parse the contents of the document.xml file and generate HTML
           const parser = new DOMParser();
           const html = parser.parseFromString(docXml, 'text/xml').documentElement;
           // Render the HTML code onto a canvas element
           const canvas = document.createElement('canvas');
           canvas.width = 595; // A4 size in pixels
           canvas.height = 842;
           const context = canvas.getContext('2d');
           context.drawSvg(html.outerHTML, 0, 0, canvas.width, canvas.height);
           // Generate a PDF document from the canvas element
           const pdf = new jsPDF();
           pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, 210, 297);
           pdf.save('output.pdf');
         });
       });
     };
   });
   

   请注意，此方法需要使用 JSZip、jsPDF 和 Canvg 库。另外请记住，这是一个简化的示例，可能不适用于所有 docx 文件。转换过程可能因文档的复杂性和使用的格式样式而异。