Vant Uploader 文件上传并预览（pdf文件）

利用vant的组件Uploader实现文件上传，并且实现上传的文件在前端进行预览，不涉及服务端。实现的效果：pdf文档如果多页，可进行上下滑动。在移动端正常使用，pc端暂无验证。

参考了这个https://github.com/Hanpeng-Chen/hampton-demo-repo，里面有好几种方法，我使用的只是其中一种。

目录

1、安装插件

2、引入插件

3、html部分

4、js部分

5、style部分

1、安装插件

2、引入插件

注：第二行很重要，不用会报错

1. import pdfJS from 'pdfjs-dist';
2. pdfJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry');

3、html部分

1. <template>
2. <div class="hp-container">
3. <div class="scroll-pdf-contanier" id="scrollPdfBox">
4. <div v-for="index in pdfTotalPages" :key="index">
5. <canvas :ref="`scrollPdfCanvas${index}`" class="content">canvas>
6. div>
7. div>
9. <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>
12. <van-row type="flex" justify="space-between" align="center">
13. <van-col>
14. <van-button @click="back">返回van-button>
15. van-col>
16. <van-col>
17. <van-button type="info" @click="upload">上传文件van-button>
18. van-col>
19. van-row>
20. div>
21. template>

4、js部分

1. import pdfJS from 'pdfjs-dist';
2. pdfJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry');
4. export default {
5. name: 'uploadFile',
6. components: {
7. },
8. data () {
9. return {
10. fileList: [],
11. pdfTotalPages: 1,
12. pdfData: null, // PDF的base64
13. scale: 1 // 缩放值
14. };
15. },
16. methods: {
17. back () {
18. this.$router.go(-1);
19. },
20. upload () {
21. this.$refs.file.chooseFile();
22. },
23. // 文件读取前的回调函数，返回 false 可终止文件读取，支持返回 Promise
24. beforeRead (file) {
25. if (Array.isArray(file) && file.length > 1) {
26. this.$toast('只能上传一份文件');
27. return false;
28. }
30. if (file.type !== 'application/pdf') {
31. this.$toast('请上传 pdf 格式的文件');
32. return false;
33. }
34. return true;
35. },
36. // 文件读取完成后的回调函数
37. afterRead (file) {
38. const _this = this;
39. var reader = new FileReader();
40. reader.readAsDataURL(file.file); // 读取文件
41. reader.onload = function (e) {
42. const data = atob(reader.result.substring(reader.result.indexOf(',') + 1));
43. _this.loadPdfData(data);
44. }
46. reader.onerror = () => {
47. _this.$toast('文件解析失败，请重新上传');
48. _this.fileList = [];
49. _this.$refs.file.deleteFile();
50. };
51. },
52. loadPdfData (data) {
53. // 读取base64的pdf流文件
54. this.pdfData = pdfJS.getDocument({
55. data: data, // PDF base64编码
56. cMapUrl: '',
57. cMapPacked: true
58. });
60. this.renderScrollPdf();
61. },
62. renderScrollPdf () {
63. this.pdfData.promise.then(pdf => {
64. this.pdfTotalPages = pdf.numPages;
65. this.renderScrollPdfPage(1);
66. });
67. },
68. // 渲染连续滚动PDF
69. renderScrollPdfPage (num) {
70. this.pdfData.promise.then(pdf => {
71. const numPages = pdf.numPages;
72. pdf.getPage(num).then(page => {
73. const canvas = this.$refs[`scrollPdfCanvas${num}`][0];
75. // 为了预览的文件内容比较清晰，所以缩放值使用了3
76. const viewport = page.getViewport(3);
78. console.log('viewport :>> ', viewport);
79. canvas.height = viewport.height * this.scale;
80. canvas.width = viewport.width * this.scale;
81. const ctx = canvas.getContext('2d');
82. const renderContext = {
83. canvasContext: ctx,
84. viewport: viewport
85. };
86. page.render(renderContext).then(() => {
87. if (num < numPages) {
88. this.renderScrollPdfPage(num + 1);
89. }
90. });
91. });
92. });
93. }
94. }
95. };

5、style部分

1. // 隐藏文件上传样式
2. ::v-deep .van-uploader {
3. display: none;
4. }
7. // 防止预览文件超过一屏
8. .content{
9. width: 750px;
10. }