Vue3 TypeScript 实现 PDF 转 Word、PDF 转图片、Word 转 PDF (无需 Node.js)

以下是一个使用 Vue3 和 TypeScript 实现 PDF 转 Word、PDF 转图片和 Word 转 PDF 的案例，无需使用 Node.js 环境：

安装依赖：

npm install pdf-lib docx-pdf-converter jsPDF file-saver


2. 创建一个名为`PdfUtils.ts`的文件，用于实现 PDF 转 Word 和 PDF 转图片的功能：
```typescript
import { PDFDocument, PDFPage } from 'pdf-lib';
import { saveAs } from 'file-saver';

export async function pdfToWord(file: File) {
  const pdfBytes = await file.arrayBuffer();
  const pdfDoc = await PDFDocument.load(pdfBytes);

  const doc = await window.docxConverter.fromPDF(pdfDoc);

  const wordFile = new Blob([doc], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
  saveAs(wordFile, 'converted.docx');
}

export async function pdfToImages(file: File) {
  const pdfBytes = await file.arrayBuffer();
  const pdfDoc = await PDFDocument.load(pdfBytes);

  const pages = pdfDoc.getPages();
  const images: string[] = [];

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    const imageBytes = await page.render();

    const image = new Blob([imageBytes], { type: 'image/png' });
    const imageUrl = URL.createObjectURL(image);
    images.push(imageUrl);
  }

  return images;
}

创建一个名为WordUtils.ts的文件，用于实现 Word 转 PDF 的功能：

import { jsPDF } from 'jspdf';

export function wordToPdf(file: File) {
  const reader = new FileReader();
  reader.onload = function (e) {
    const data = new Uint8Array(e.target.result as ArrayBuffer);
    const doc = new jsPDF();

    doc.setFontSize(12);
    doc.text(20, 20, data);
    doc.save('converted.pdf');
  };

  reader.readAsArrayBuffer(file);
}

在 Vue 组件中使用上述工具类：

<template>
  <div>
    <input type='file' @change='onFileChange' accept='.pdf, .docx'>
    <button @click='convertToWord'>PDF to Word</button>
    <button @click='convertToImages'>PDF to Images</button>
    <button @click='convertToPdf'>Word to PDF</button>
    <div v-if='convertedImages.length > 0'>
      <h2>Converted Images:</h2>
      <div v-for='imageUrl in convertedImages' :key='imageUrl'>
        <img :src='imageUrl' alt='Converted Image' style='width: 200px; height: auto;'>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import { pdfToWord, pdfToImages } from './PdfUtils';
import { wordToPdf } from './WordUtils';

export default defineComponent({
  setup() {
    const convertedImages = ref<string[]>([]);

    function onFileChange(event: Event) {
      const target = event.target as HTMLInputElement;
      const file = target.files?.[0];
      // Do something with the selected file
    }

    async function convertToWord() {
      await pdfToWord(file);
    }

    async function convertToImages() {
      const images = await pdfToImages(file);
      convertedImages.value = images;
    }

    function convertToPdf() {
      wordToPdf(file);
    }

    return { onFileChange, convertToWord, convertToImages, convertToPdf, convertedImages };
  },
});
</script>

注意：以上代码只是一个简单的示例，实际使用时可能需要根据具体的需求进行调整和优化。另外，上述示例中使用了file-saver库来保存文件，pdf-lib库来处理 PDF 文件，docx-pdf-converter库来处理 Word 文件，jsPDF库来生成 PDF 文件。请根据实际情况在项目中添加这些依赖。

Vue3 TypeScript 实现 PDF 转 Word、PDF 转图片、Word 转 PDF (无需 Node.js)