Uni-app 微信小程序 使用 web-view 在线查看PDF
在线查看PDF文件,已经是很常见的需求了,也有很多种方法可以时间,此次的需求是在微信小程序里打开、查看PDF文件,这次使用的 web-view 组件。具体使用用法如下:<template><view id="web-info"><web-view :src="src" v-if="iOS"></web-view></view></t
·
在线查看PDF文件,已经是很常见的需求了,也有很多种方法可以时间,此次的需求是在微信小程序里打开、查看PDF文件,这次使用的 web-view 组件。
具体使用用法如下:
<template>
<view id="web-info">
<web-view :src="src" v-if="iOS"></web-view>
</view>
</template>
<script lang="ts">
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch, Mixins } from 'vue-property-decorator';
import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
@Component
export default class WebInfo extends Vue {
// data
// PDF文件地址
public src: string = '';
// 用于判断操作系统
public iOS: boolean = true;
// mounted
public async onLoad(option: any): Promise<void> {
// 动态显示标题名称
uni.setNavigationBarTitle({ title: option.title });
const src = `https://www.pt-teach.xyz/${option.src}`;
// 判断操作系统
uni.getSystemInfo({
success: (res: any) => {
if (res.system.includes('iOS')) {
this.iOS = true;
// iOS 可直接查看
this.src = src;
} else {
this.iOS = false;
// Android 需要下载后、打开
uni.downloadFile({
url: src,
success: (res: any) => {
const path = res.tempFilePath;
uni.openDocument({
filePath: path,
fileType: 'pdf',
success: (res: any) => {
uni.navigateBack({
delta: 1
});
},
fail: (err) => {
uni.showToast({ title: '打开文件失败', icon: 'none', duration: 2000 });
}
});
},
fail: (err) => {
console.log(err);
uni.showToast({ title: '下载文件失败', icon: 'none', duration: 2000 });
}
});
}
}
});
}
}
</script>
<style scoped lang="scss"></style>
注:
- iOS 系统可以直接使用 web-view 打开查看
- Android 系统 需要先下载到本地,然后打开查看
更多推荐
已为社区贡献5条内容
所有评论(0)