uni-app 预览pdf文件

uni-app 预览pdf文件

• 有一个不下载文件，预览文件的需求，一开始是要求能够预览word文档，但是这个文档只是用来观看的，不需要进行任何修改操作。为啥不预览pdf呢（其实是我菜，没办法做到在线预览word文档，甚至编辑）
• 在网上查看了很多资料，uni-app也看到了一些插件（付费的），实际我这项目是完全没必要预览word的，pdf足够，只是单存的展示一个文件内容。
• 解决方案

  • pdfjs （不推荐）

    • 将pdfjs 文件下载下来拷贝到项目中，光这个pdfjs文件就有11~12M大小。
    • 只支持H5，不支持APP。我看了一下 是因为使用了（?.和?? 操作符），要是手动修改的话，1、200处。
    • 只能打开pdf文件
    • pdfjs 使用方法参考了https://blog.csdn.net/liupan6889/article/details/102735131 这位大佬的 第一种方式，其他的方式太复杂了（我知道我菜）

  • uni.openDocument({})

    • uni-app 自带的打开文件的API，新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
    • 参数：
      1. filePath 文件路径 （可通过 downloadFile 获得，注意跨域问题）
      2. fileType 文件类型 （有效值 doc, xls, ppt, pdf, docx, xlsx, pptx）
      3. success、fail、complete 回调函数
    • H5 使用浏览器打开，当前浏览器不支持则不能打开，PDF 可直接打开，word文件会弹出下载提示
    • APP 调用相关应用程序打开，没有则打不开。可以调用WPS打开。
    • 参考 https://blog.csdn.net/qq_42597536/article/details/109742895

  • web-view

    • 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
    • 属性：
    1. src webview 指向网页的链接
    • H5端 可以直接打开 pdf 文件，无需打开新页面，word文件会弹下载提示
    • App 端 pdf文件 和 word文件 都会弹下载提示
    • 看到有使用 office 网址在线打开的 http://view.officeapps.live.com/op/view.aspx?src=${url}
      • H5 可以打开，但是 文档中的图片没有了，格式也不一样。
      • APP 端 ??? 打开空白，难道是我打开的方式不对。（有时候控制台会报不安全错误）
      • 有大佬实现了，麻烦告我一声
      • 参考链接 https://www.cnblogs.com/baoziqiaodaima/p/12067635.html

  • uni.openDocument({}) 和 web-view 结合

    • H5端 使用 web-view APP端使用uni.openDocument({}) 至少打开 PDF文件是没什么太大问题
    • 自己写的测试小案例

<template>
  <view>
  	<template v-if="isShow">
  		<button type="default" @click="viewFile">查看</button>
  	</template>
  	<!-- #ifdef H5 -->
  	<template v-else>
  		<web-view :src="url"></web-view>
  	</template>
  	<!-- #endif -->
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
  			isShow: true,
  			url: '',
  			env: '',
  		}
  	},
  	mounted() {
  		this.env = 'http://192.168.6.244:3000';
  	},
  	methods: {
  		viewFile() {
  			uni.request({
  				url: 'http://192.168.6.244:3000/file/',
  				method: "GET",
  				data: {
  					fileType: 'pdf',
  				},
  				success: (res) => {
  					// #ifdef H5
  					this.url = this.env + res.data.data;
  					this.isShow = !this.isShow;
  					// #endif
  					// #ifdef APP-PLUS
  					uni.downloadFile({
  						url: this.env + res.data.data,
  						success: res => {
  							uni.openDocument({
  								filePath: res.tempFilePath,
  								success: (res) => {
  									console.log(res, '文件打开成功');
  								}
  							})
  						}
  					})
  					// #endif
  				}
  			});
  		}
  	}
  }
</script>