admin 管理员组文章数量: 887019
公司项目中要求前端画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端,而安卓机需要给个提示到手机浏览器让用户自行下载,就可以正常下载文件了
版权声明：本文标题：H5下载pdf文件,微信跳转到浏览器下载方式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1727387940h1112896.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论