小程序文件预览，页面预览不下载

最新推荐文章于 2024-05-10 10:14:20 发布

A了LONE

最新推荐文章于 2024-05-10 10:14:20 发布

阅读量266

点赞数

文章标签：小程序 javascript html uniapp

本文链接：https://blog.csdn.net/qq_53701739/article/details/129734198

版权

该代码段展示了在uni-app框架下，如何利用web-view组件结合base64编码和http配置来实现文件的在线预览功能。onLoad方法中处理参数并设置导航栏标题，同时将url转换为base64编码后作为web-view的src属性值，以加载预览页面。

摘要由CSDN通过智能技术生成

<template>
	<view>
		<web-view :webview-styles="webviewStyles" :src="src"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "",
				webviewStyles: {
					progress: {
						color: '#2979ff'
					},
					width: '100vw',
					height: '100vh'
				}
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.fileName
			});
			console.log("预览地址：",
				`${uni.$u.http.config.baseURL}/kkfile/onlinePreview?url=${this.base64_encode(option.url)}`)
				
			this.src = `${uni.$u.http.config.baseURL}/kkfile/onlinePreview?url=${this.base64_encode(option.url)}`
		},
		methods: {
			base64_encode(str) { // 编码，配合encodeURIComponent使用
				var c1, c2, c3;
				var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
				var i = 0,
					len = str.length,
					strin = '';
				while (i < len) {
					c1 = str.charCodeAt(i++) & 0xff;
					if (i == len) {
						strin += base64EncodeChars.charAt(c1 >> 2);
						strin += base64EncodeChars.charAt((c1 & 0x3) << 4);
						strin += "==";
						break;
					}
					c2 = str.charCodeAt(i++);
					if (i == len) {
						strin += base64EncodeChars.charAt(c1 >> 2);
						strin += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
						strin += base64EncodeChars.charAt((c2 & 0xF) << 2);
						strin += "=";
						break;
					}
					c3 = str.charCodeAt(i++);
					strin += base64EncodeChars.charAt(c1 >> 2);
					strin += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
					strin += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
					strin += base64EncodeChars.charAt(c3 & 0x3F)
				}
				return strin
			},
			base64_decode(input) { // 解码，配合decodeURIComponent使用
				var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
				var output = "";
				var chr1, chr2, chr3;
				var enc1, enc2, enc3, enc4;
				var i = 0;
				input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
				while (i < input.length) {
					enc1 = base64EncodeChars.indexOf(input.charAt(i++));
					enc2 = base64EncodeChars.indexOf(input.charAt(i++));
					enc3 = base64EncodeChars.indexOf(input.charAt(i++));
					enc4 = base64EncodeChars.indexOf(input.charAt(i++));
					chr1 = (enc1 << 2) | (enc2 >> 4);
					chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
					chr3 = ((enc3 & 3) << 6) | enc4;
					output = output + String.fromCharCode(chr1);
					if (enc3 != 64) {
						output = output + String.fromCharCode(chr2);
					}
					if (enc4 != 64) {
						output = output + String.fromCharCode(chr3);
					}
				}
				return utf8_decode(output);
			},
		}
	}
</script>

<style>

</style>