安装依赖
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>
本文作者为gengboxb,转载请注明。