uniapp-微信公众号实现pdf的预览和下载

uniapp-微信公众号实现pdf的预览和下载

1.预览

预览最方便的方式就是借助pdf.js，直接官网下载导入到自己项目下即可。
注意：一定要放在根目录下面 /hybrid/html 否则可能会出现找不到的情况。

代码

<template>
    <view>
    <!-- 通过web-view渲染到页面上 -->
        <web-view :src="allUrl"></web-view>
    </view>
</template>

<script>
	import {getPdf} from '@/service/test.js';
    export default {
        data() {
            return {
                viewerUrl: '/hybrid/html/web/viewer.html',
                allUrl: ''  
            }
        },
        onLoad(options) {
           this.pdf()
        },
        methods: {
			//自己封装的请求的方法
			pdf(){
				getPdf().then((res)=>{
				     //这里拿到的结果是base64的流，需要转为二进制的流
				     //可以直接拿到二进制的流
					 let pdf = `data:application/pdf;base64,${res}`;
					 pdf = this.base64ToBlob(pdf)
					 this.allUrl = this.viewerUrl + '?file=' + URL.createObjectURL(pdf)
				})
				
			},
			
            // base64转blob
            base64ToBlob(base64Data) {
                let arr = base64Data.split(','),
                    fileType = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    l = bstr.length,
                    u8Arr = new Uint8Array(l);

                while (l--) {
                    u8Arr[l] = bstr.charCodeAt(l);
                }
                return new Blob([u8Arr], {
                    type: fileType
                });
            }
        }
    }
</script>

2.下载

微信公众号是不支持直接下载的，所以只能引导用户打开浏览器去进行下载。

<template>
	<view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(){
		 	this.downFile()
		},
		methods: {
			downFile() {
				let jweixin = require('jweixin-module') 
				uni.downloadFile({

					 url:  '',//下载地址
					header: {
						'X-Access-Token': uni.getStorageSync('token'),
						 "Access-Control-Expose-Headers":'Content-Disposition'
					},
					responseType:'arraybuffer',
					success: (data) => {
						this.resourceUrl = data.tempFilePath
						//这里拿到的也是二进制的流
						console.log(data.tempFilePath)
						if (data.statusCode === 200) {
							// window.location = URL
							//word同样适用
							const fileName = 'xxx.pdf'  // 文件名+后缀
							const listNode = document.createElement("a")
							listNode.download = fileName 
							listNode.style.display = "none"
							listNode.href = data.tempFilePath // 文件流生成的url
							document.body.appendChild(listNode)
							listNode.click()  // 模拟在按钮上实现一次鼠标点击
							window.URL.revokeObjectURL(listNode.href)  // 释放 URL 对象
							document.body.removeChild(listNode)  // 移除 a 标签
							
						}
			
					}
				});
			},
		}
	}
</script>

<style>

</style>