在開發中常常會遇到需要在一個應用里打開一份pdf文件并預覽，經真機調試時發現在蘋果手機上打開pdf文件能正常預覽，但在安卓手機打開時卻會需要我們下載才能預覽，無法直接預覽
為了解決這個問題，我們采用安裝pdfH5插件的方式，代碼如下：
1、安裝pdfh5插件
npm i -S pdfh5
2、構建一個pdhH5組件
<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組件
{path: 'pdfView'name:'pdfView',component: () => import('../components/pdfH5.vue')
}
4、在業務組件跳轉到pdfH5組件
const handleClickPdf = () => {router.push({path:'/xxx/pdfview'query: {// pdfUr1是需要跳轉的pdf文件的靜態資源所在地址// name是瀏覽器頂部顯示的文件標題pdfUr1: encodeURIComponent('xxx/xxx'),name: '條款及細則',}})
}
