利用vant的组件Uploader实现文件上传，并且实现上传的文件在前端进行预览，不涉及服务端。实现的效果：pdf文档如果多页，可进行上下滑动。在移动端正常使用，pc端暂无验证。
参考了这个https://github.com/Hanpeng-Chen/hampton-demo-repo，里面有好几种方法，我使用的只是其中一种。
目录
1、安装插件
2、引入插件
3、html部分
4、js部分
5、style部分文章来源：https://www.toymoban.com/news/detail-510023.html
1、安装插件
npm install pdfjs-dist@^2.0.9432、引入插件
注：第二行很重要，不用会报错文章来源地址https://www.toymoban.com/news/detail-510023.html
import pdfJS from 'pdfjs-dist';
pdfJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry');3、html部分
<template>
<div class="hp-container">
<div class="scroll-pdf-contanier" id="scrollPdfBox">
<div v-for="index in pdfTotalPages" :key="index">
<canvas :ref="`scrollPdfCanvas${index}`" class="content"></canvas>
</div>
</div>
<van-uploader accept="file" result-type="text" v-model="fileList" multiple :max-count="1" class="uploader" ref="file" :after-read="afterRead" :before-read="beforeRead"></van-uploader>
<van-row type="flex" justify="space-between" align="center">
<van-col>
<van-button @click="back">返回</van-button>
</van-col>
<van-col>
<van-button type="info" @click="upload">上传文件</van-button>
</van-col>
</van-row>
</div>
</template>4、js部分
import pdfJS from 'pdfjs-dist';
pdfJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry');
export default {
name: 'uploadFile',
components: {
},
data () {
return {
fileList: [],
pdfTotalPages: 1,
pdfData: null, // PDF的base64
scale: 1 // 缩放值
};
},
methods: {
back () {
this.$router.go(-1);
},
upload () {
this.$refs.file.chooseFile();
},
// 文件读取前的回调函数，返回 false 可终止文件读取，支持返回 Promise
beforeRead (file) {
if (Array.isArray(file) && file.length > 1) {
this.$toast('只能上传一份文件');
return false;
}
if (file.type !== 'application/pdf') {
this.$toast('请上传 pdf 格式的文件');
return false;
}
return true;
},
// 文件读取完成后的回调函数
afterRead (file) {
const _this = this;
var reader = new FileReader();
reader.readAsDataURL(file.file); // 读取文件
reader.onload = function (e) {
const data = atob(reader.result.substring(reader.result.indexOf(',') + 1));
_this.loadPdfData(data);
}
reader.onerror = () => {
_this.$toast('文件解析失败，请重新上传');
_this.fileList = [];
_this.$refs.file.deleteFile();
};
},
loadPdfData (data) {
// 读取base64的pdf流文件
this.pdfData = pdfJS.getDocument({
data: data, // PDF base64编码
cMapUrl: '',
cMapPacked: true
});
this.renderScrollPdf();
},
renderScrollPdf () {
this.pdfData.promise.then(pdf => {
this.pdfTotalPages = pdf.numPages;
this.renderScrollPdfPage(1);
});
},
// 渲染连续滚动PDF
renderScrollPdfPage (num) {
this.pdfData.promise.then(pdf => {
const numPages = pdf.numPages;
pdf.getPage(num).then(page => {
const canvas = this.$refs[`scrollPdfCanvas${num}`][0];
// 为了预览的文件内容比较清晰，所以缩放值使用了3
const viewport = page.getViewport(3);
console.log('viewport :>> ', viewport);
canvas.height = viewport.height * this.scale;
canvas.width = viewport.width * this.scale;
const ctx = canvas.getContext('2d');
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).then(() => {
if (num < numPages) {
this.renderScrollPdfPage(num + 1);
}
});
});
});
}
}
};5、style部分
// 隐藏文件上传样式
::v-deep .van-uploader {
display: none;
}
// 防止预览文件超过一屏
.content{
width: 750px;
}到了这里，关于Vant Uploader 文件上传并预览（pdf文件）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
