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

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

1. 安装依赖：

npm install pdf2docx pdf-image word2pdf

2. 创建一个名为FileConverter.vue的组件：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange" accept=".pdf,.docx" />
    <button @click="convertToWord" :disabled="!file">PDF to Word</button>
    <button @click="convertToImage" :disabled="!file">PDF to Image</button>
    <button @click="convertToPDF" :disabled="!file">Word to PDF</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { convert } from 'pdf2docx';
import { convertToImages } from 'pdf-image';
import { convert as convertToPDF } from 'word2pdf';

export default defineComponent({
  name: 'FileConverter',
  setup() {
    const file = ref<File | null>(null);

    const handleFileChange = (event: any) => {
      file.value = event.target.files[0];
    };

    const convertToWord = async () => {
      if (file.value) {
        const pdfData = await fileToBase64(file.value);
        const wordData = await convert(pdfData);
        downloadFile(wordData, 'converted.docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
      }
    };

    const convertToImage = async () => {
      if (file.value) {
        const pdfData = await fileToBase64(file.value);
        const imagesData = await convertToImages(pdfData);
        imagesData.forEach((imageData, index) => {
          downloadFile(imageData, `converted_${index}.png`, 'image/png');
        });
      }
    };

    const convertToPDF = async () => {
      if (file.value) {
        const wordData = await fileToBase64(file.value);
        const pdfData = await convertToPDF(wordData);
        downloadFile(pdfData, 'converted.pdf', 'application/pdf');
      }
    };

    const fileToBase64 = (file: File): Promise<string> => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          resolve(reader.result as string);
        };
        reader.onerror = (error) => {
          reject(error);
        };
      });
    };

    const downloadFile = (data: string, filename: string, mimeType: string) => {
      const link = document.createElement('a');
      link.href = data;
      link.download = filename;
      link.type = mimeType;
      link.click();
    };

    return {
      file,
      handleFileChange,
      convertToWord,
      convertToImage,
      convertToPDF,
    };
  },
});
</script>

3. 在需要使用的页面中引入FileConverter.vue组件：

<template>
  <div>
    <FileConverter />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import FileConverter from '@/components/FileConverter.vue';

export default defineComponent({
  name: 'App',
  components: {
    FileConverter,
  },
});
</script>

这个案例中，我们使用了pdf2docx库来将PDF转换为Word文档，pdf-image库将PDF转换为图片，word2pdf库将Word文档转换为PDF。用户可以选择一个PDF或Word文件，然后点击相应的按钮来进行转换，转换后的文件将会自动下载到用户的设备中。

注意：由于涉及文件读取和下载，该案例需要在浏览器环境下运行，不能直接在Node.js中使用