纯前端实现word,pdf,excel.txt的导入导出

vue3中使用

cnpm install mammoth pdfjs-dist xlsx html-docx-js file-saver html2pdf.js

<input type="file" ref="inputFile" @change="handleFileUpload" accept=".docx,.pdf,.txt,.xlsx" v-show="0" />

/** 选择文件 */
const handleFileUpload = (event) => {
  const file = event.target.files[0];
  console.log(file);
  console.log(file.type);
  if (!file) {
    alert("Please upload a valid file.");
    return;
  }

  const reader = new FileReader();

  if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
    // Handle Word files
    reader.onload = (e) => {
      const arrayBuffer = e.target.result;
      mammoth
        .convertToHtml({ arrayBuffer: arrayBuffer })
        .then((result) => {
          ueditorRef.value.insertUEContent(result.value);
        })
        .catch((err) => {
          console.error('Error reading the file:', err);
          alert('Error reading the file. Please check the console for more details.');
        });
    };
    reader.readAsArrayBuffer(file);
  } else if (file.type === "application/pdf") {
    const reader = new FileReader();
    reader.onload = (e) => {
      console.log(e);
      const typedArray = new Uint8Array(e.target.result);
      pdfjsLib.getDocument(typedArray).promise.then((pdf) => {
        const numPages = pdf.numPages;
        for (let pageNum = 1; pageNum <= numPages; pageNum++) {
          pdf.getPage(pageNum).then((page) => {
            const scale = 1.5;
            const viewport = page.getViewport({ scale: scale });

            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
              const imgData = canvas.toDataURL('image/png');
              ueditorRef.value.insertUEContent(`<img src="${imgData}" alt="PDF page ${pageNum}" />`);
            });
          }).catch((error) => {
            console.error(`Error rendering page ${pageNum}:`, error);
          });
        }
      }).catch((error) => {
        console.error('Error getting document:', error);
      });
    };
    reader.readAsArrayBuffer(file);
  } else if (file.type === 'text/plain') {
    // Handle TXT files
    reader.onload = (e) => {
      const text = e.target.result;
      ueditorRef.value.insertUEContent(`<p>${text}</p>`);
    };
    reader.readAsText(file);
  } else if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    // Handle Excel files
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const html = XLSX.utils.sheet_to_html(worksheet);
      ueditorRef.value.insertUEContent(html);
    };
    reader.readAsArrayBuffer(file);
  } else {
    alert('Unsupported file type.');
  }
}

/** 导出文件 */
const exportContent = (command) => {
  if (command == 'doc' || command == 'docx') {
    var converted = htmlDocx.asBlob(ueditorRef.value.getUEContent());
    saveAs(converted, `${submitData.documentName}.${command}`);
  } else {
    var element = document.createElement('div');
    element.style.color = '#000';
    element.innerHTML = ueditorRef.value.getUEContent();
    var opt = {
      margin: 1,
      filename: `${submitData.documentName}.pdf`,
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().from(element).set(opt).save();
  }
}