vue vant移动端pdf文件上传

你可以使用Vant的Upload组件和pdf.js库来实现移动端的PDF文件上传和预览功能。

首先，在你的Vue项目中安装Vant和pdf.js库：

npm install vant pdfjs-dist --save

然后，在你的组件中引入Upload组件和pdf.js库：

<template>
  <div>
    <van-upload
      :max-count="1"
      :before-read="beforeRead"
      :after-read="afterRead"
      accept="application/pdf"
      :show-upload="false"
    >
      <van-button type="primary">上传文件</van-button>
    </van-upload>
    <div ref="pdfContainer"></div>
  </div>
</template>

<script>
import { Upload, Button } from 'vant'
import pdfjsLib from 'pdfjs-dist'

export default {
  components: {
    VanUpload: Upload,
    VanButton: Button,
  },
  methods: {
    beforeRead(file) {
      // 判断文件类型是否为PDF
      return file.type === 'application/pdf'
    },
    afterRead(file) {
      // 读取文件并渲染PDF预览
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onload = () => {
        pdfjsLib.getDocument(new Uint8Array(reader.result)).promise.then(pdf => {
          pdf.getPage(1).then(page => {
            const canvas = document.createElement('canvas')
            const scale = 1.5
            const viewport = page.getViewport({ scale })
            const context = canvas.getContext('2d')
            canvas.height = viewport.height
            canvas.width = viewport.width
            page.render({ canvasContext: context, viewport }).promise.then(() => {
              this.$refs.pdfContainer.innerHTML = ''
              this.$refs.pdfContainer.appendChild(canvas)
            })
          })
        })
      }
    },
  },
}
</script>

在上面的代码中，我们使用了Vant的Upload组件来实现文件上传功能，并且设置了只能上传PDF文件。在afterRead方法中，我们使用pdf.js库来读取上传的PDF文件，并将PDF渲染到页面上。

需要注意的是，pdf.js库会异步加载PDF文件，因此我们需要在Vue组件中使用promise来处理异步操作。此外，为了在页面上显示PDF预览，我们需要使用canvas元素来渲染PDF页面。