【VUE】上传并预览pdf

安装依赖

npm i vue-pdf

使用

html部分

<input type="file" @change='handelChange($event)'>
<pdf v-for="i in numPages" :key="i" :src="fileBa" :page="i" ref="myPdfComponent"></pdf>

js部分

<script>
import pdf from 'vue-pdf'
// 解决部分文字不显示的问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

export default {
  data () {
    return {
      numPages: 0,
      fileBa: ''
    }
  },
  components: {
    pdf
  },
  mounted () {},
  methods: {
    handelChange (e) {
      var file = new File(e.target.files, 'r')
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
      // base64格式PDF
        let fileBa = reader.result.replace('data:application/octet-stream;base64,', '')
        let datas = 'data:application/pdf;base64,' + fileBa
        this.fileBa = pdf.createLoadingTask({ url: datas, CMapReaderFactory })
        this.fileBa.promise.then(pdf => {
          this.numPages = pdf.numPages
        })
        console.log(reader.result)
      }
      reader.onerror = function (error) {
        console.log('Error: ', error)
      }
    }
  }
}
</script>