h5预览pdf适配最佳方案，解决安卓端h5打开pdf地址只能下载问题

demo地址：Entremets/vue3-pdf-preview-demo: h5预览pdf适配最佳方案，解决安卓端h5打开pdf地址只能下载问题

参考文章

安卓端微信 H5 实现在线 PDF 预览_微信浏览器预览pdf-CSDN博客

步骤

首先到 pdf.js官网 下载官方提供的 demo。我下载的是v2.13.216我下载的是v2.13.216，v2.13.216 github 下载链接。解压后的目录放在项目的public目录下

在页面跳转到预览pdf页面

直接跳转打开到这个viewer.html页面就可以，file后面填写你的在线pdf地址，部署的话最好在一个域名下，不然可能会有跨域问题

<template>
  <button class="mt-20" @click="handleClick()">
    跳转到预览pdf页面
  </button>
</template>

<script setup>
// 时候直接跳转打开到这个html页面就可以，file后面填写你的在线pdf地址，最好在一个域名下，不然可能会有跨域问题
const handleClick = () => {
  // window.location.href = '你的域名' + `/view/web/viewer.html?file=你的pdf地址`
  window.location.href = 'http://localhost:5173' + `/view/web/viewer.html?file=https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf`
};

</script>

<style scoped>

</style>

pdfjs的包文件可能比较大，可以自行优化一下包体积大小