vue pdf上传下载预览

Vue.js是一个流行的前端框架，可以方便地处理PDF文件上传、下载以及预览功能。以下是实现这种功能的基本步骤：

1. **安装依赖**：
使用npm或yarn安装相关的库，如`vue-file-input`（用于文件选择）、`pdfjs-dist`（处理PDF文件）等。

npm install vue-file-input pdfjs-dist

2. **创建组件**：
创建一个新的Vue组件，比如`PdfUpload.vue`，在这个组件里集成文件选择和PDF预览的功能。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="download">下载</button>
    <div v-if="previewVisible">
      <pdf-js :src="fileUrl"></pdf-js>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import PDFJS from 'pdfjs-dist';

export default {
  setup() {
    const fileInput = ref(null);
    const fileUrl = ref('');
    const previewVisible = ref(false);

    const handleFileChange = (e) => {
      if (e.target.files && e.target.files) {
        const file = e.target.files;
        // 开始加载并解析PDF
        PDFJS.getDocument(file).promise.then((doc) => {
          doc.getPage(1).then((page) => {
            fileUrl.value = URL.createObjectURL(page.getOperatorContext().canvases.canvas);
            previewVisible.value = true;
          });
        });
      }
    };

    const download = () => {
      const a = document.createElement('a');
      a.href = fileUrl.value;
      a.download = `document.pdf`;
      a.click();
    };

    return {
      fileInput,
      fileUrl,
      previewVisible,
      handleFileChange,
      download
    };
  },
};
</script>

3. **模板绑定**：
在模板中，将事件处理器、属性绑定到对应的HTML元素上，确保用户可以选择文件，点击按钮下载，并显示PDF预览。

4. **样式和错误处理**：
需要添加适当的CSS样式，例如隐藏或调整预览区大小，以及处理可能出现的错误，如加载失败等情况。