H5下载pdf文件,微信跳转到浏览器下载方式

公司项目中要求前端画H5页面并且将画好了文件转成pdf下载到用户的手机上,首先测试文件小依赖安装,也可以使用自己的pdf转化,下面3个小插件根据自己情况安装

npm install jspdf file-saver --save ,

npm install html2canvas

npm install jspdf-autotable

1.首先H5下载pdf文件有个坑,现在大部分人都是使用微信打开链接下载文件的,第一时间便会直接使用微信打开,而微信中有坑的是,安卓和苹果系统下载的区别,其中苹果机没有问题,而安卓机有各种各样的问题,其中解决的方法是将安卓想要下载的pdf转到手机浏览器中让用户自己去下载;原理呢是iOS上使用的是 window.location.href 跳转下载，Android上使用的是js创建的a标签下载，未设置download属性;

代码如下:

<template>
  <div class="download_ios">
    <!-- 微信: {{ isWeiXin }} 安卓:{{ isAndroidPhone }} -->
    <div class="mask" v-if="isWeiXin && isAndroidPhone">
      <div class="tips">1、点击右上角图标</div>
      <div class="tips">2、选择 在浏览器中 打开</div>
    </div>
    <div class="button" v-else>
      <h1 ref="app">111</h1>
      <button @click="gopfg">下载PDF</button>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import 'jspdf-autotable'

export default {
  name: '',
  data() {
    return {
      isWeiXin: true,
      isAndroidPhone: false,
      isiOSPhone: false
    }
  },
  methods: {
    gopfg() {
      let temApp = this.$refs.app
      html2canvas(temApp).then(canvas => {
        // 生成 PDF
        const doc = new jsPDF('p', 'pt', [canvas.width, canvas.height])
        console.log(doc)
        const imgData = canvas.toDataURL('image/jpeg', 1.0)
        doc.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height)
        doc.save('example.pdf')
      })
    },
    getIsWxClient() {
      const ua = navigator.userAgent.toLowerCase()

      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.isWeiXin = true
      } else {
        this.isWeiXin = false
      }
    },
    // 判断当前设备是否为Android手机
    isAndroid() {
      return /Android/i.test(navigator.userAgent)
    },

    // 判断当前设备是否为iOS（苹果）手机
    isiOS() {
      return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
    }
  },
  mounted() {
    this.getIsWxClient()
    this.isAndroidPhone = this.isAndroid()

    this.isiOSPhone = this.isiOS()
  }
}
</script>

<style scoped lang="scss">
.mask {
  width: 100%;
  height: 100vh;
  background-color: #666666;
  padding-top: 30%;
}
.mask .tips {
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
}
.button {
  width: 90%;
  padding: 5%;
}
</style>

其中,我们如果手机是苹果的直接下载Pdf是没有问题的同pc端,而安卓机需要给个提示到手机浏览器让用户自行下载,就可以正常下载文件了