如何解决安卓手机无法预览pdf文件而是需要直接下载的问题

在开发中常常会遇到需要在一个应用里打开一份pdf文件并预览,经真机调试时发现在苹果手机上打开pdf文件能正常预览,但在安卓手机打开时却会需要我们下载才能预览,无法直接预览

为了解决这个问题,我们采用安装pdfH5插件的方式,代码如下:

1、安装pdfh5插件

npm i -S pdfh5

2、构建一个pdhH5组件

javascript 复制代码
<script>
import { computed, onMounted } from "vue";
import { useRoute } from 'vue-router'

import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

export default {
  beforeRouteEnter: (to, from, next) => {
    if (to.query.name) {
      to.name = to.query.name
    }
    next()
  },
  setup() {
    const route = useRoute()
    onMounted(() => {
        let pdfurl = decodeURIComponent(route.query.pdfUrl)
        let pdfh5 = null

        //实例化
        pdfh5 = new Pdfh5("#PDF", {
            pdfurl: pdfurl,
        });

    });
  },
};
</script>

<template>
  <div id="PDF" class="view-pdf"></div>
</template>

<style lang="scss" scoped>
.view-pdf {
  width: 100%;
  height: 100vh;
}
</style>

3、在路由文件引入pfdH5组件

javascript 复制代码
{
	path: 'pdfView'
	name:'pdfView',
	component: () => import('../components/pdfH5.vue')
}

4、在业务组件跳转到pdfH5组件

javascript 复制代码
const handleClickPdf = () => {
	router.push({
		path:'/xxx/pdfview'
		query: {
			// pdfUr1是需要跳转的pdf文件的静态资源所在地址
			// name是浏览器顶部显示的文件标题
			pdfUr1: encodeURIComponent('xxx/xxx'),
			name: '条款及细则',
		}
	})
}
相关推荐
hawk2014bj43 分钟前
Ubuntu 安装 MySQL
android·mysql·ubuntu
_小马快跑_3 小时前
Android 图像合成:玩转 PorterDuff.Mode 的 18 种混合模式
android
_小马快跑_3 小时前
Android | 多种方式实现图片圆角矩形和圆形效果(续)
android
_小马快跑_3 小时前
MaterialShapeDrawable vs CardView:两种方式实现阴影效果对比
android
_小马快跑_3 小时前
玩转ShapeableImageView:实现灵活的自定义形状与边框效果
android
菜鸟xiaowang4 小时前
Android 使用ninja加速编译的方法
android
_一条咸鱼_6 小时前
Android大厂面试秘籍: View 相关面试题深入分析
android·面试·android jetpack
_一条咸鱼_6 小时前
Android 大厂面试秘籍:Hilt 框架的测试支持模块(八)
android·面试·kotlin
匹马夕阳7 小时前
(十三)安卓开发中的输入框、复选框、单选框和开关等表单控件详解
android
yangshuo12819 小时前
WSA(Windows Subsystem for Android)安装LSPosed和应用教程
android·windows·模拟器·lsposed·windows安卓子系统