vue3 typescript 不使用nodejs实现 PDF 转 WORD PDF 转图片 WORD 转 PDF 案例

以下是一个使用Vue3和TypeScript实现PDF转Word、PDF转图片和Word转PDF的案例：

安装依赖：
```
npm install pdf-lib docx-pdf-converter
```

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

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文件。请根据实际情况在项目中添加这些依赖

vue3 typescript 不使用nodejs实现 PDF 转 WORD PDF 转图片 WORD 转 PDF 案例