前言：
IOS手機(jī)可以直接下載文件，但是需要后端設(shè)置Content-Disposition和Content-Type
安卓手機(jī)只能打開其他瀏覽器下載，（別問我怎么知道的，試出來的結(jié)果），所以跳轉(zhuǎn)至中專頁，讓在默認(rèn)瀏覽器打開
最新最優(yōu)方法可以點(diǎn)擊閱讀，本篇文章可以直接略過
所需要的方法：
1：是否時(shí)微信瀏覽器環(huán)境
export const isWeChat = () => {
var ua = window.navigator.userAgent.toLowerCase();
// ua.indexOf('micromessenger')為真-微信端，如果為假，就是其他瀏覽器
if (ua.indexOf("micromessenger") > -1) {
return true; // 是微信端
} else {
return false;
}
};
2: 判斷時(shí)安卓還是IOS
export const appSource = () => {
const u = navigator.userAgent;
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS) {
return "ios";
} else {
return "andriod";
}
};
3：form表單方式下載文件
export const downloadform = url => {
var form = document.createElement("form");
form.action = url;
form.method = "get";
form.style.display = "none";
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
};
使用方式
import { appSource, downloadform } from "@/utils/util";
downloadClick() {
if (appSource() === "ios") {
downloadform(`${location.origin}/preHostilePdf/2022-02-21/36212419741128205X-1645420312158.pdf`);
} else {
// 安卓去中轉(zhuǎn)頁
this.$router.push({
path: "/pdfView",
query: {
toLink: encodeURIComponent("/preHostilePdf/2022-02-21/36212419741128205X-1645420312158.pdf")
}
});
}
},
/pdfView 頁面源碼 (只針對(duì)安卓用戶)
PopUp組件是引導(dǎo)層，引導(dǎo)用戶點(diǎn)擊右上角打開其他默認(rèn)瀏覽器，代碼就不貼這里了，每個(gè)公司都有每個(gè)公司的風(fēng)格。
_loadFile是使用pdf.js 預(yù)覽pdf文件的，會(huì)在下個(gè)文章寫，當(dāng)然如果頁面是空白也可以，或者是一段友好的提醒文字也可以。
<template>
<div class="canvas-container">
<div class="canvas" :class="scaleCount > 0 ? 'scroolBox' : ''" id="canvas">
<canvas v-for="page in pages" class="canvasDiv" :id="'the-canvas' + page" :key="page" ref="pdf"></canvas>
</div>
<div class="flexBox">
<img @click="scaleD" class="big" src="@/assets/icon/bigIcon.png" alt="" />
<br />
<img v-show="scaleCount === 0" class="small" src="@/assets/icon/smallDisableIcon.png" alt="" />
<img v-show="scaleCount > 0" @click="scaleX" class="small" src="@/assets/icon/smallIcon.png" alt="" />
</div>
<div class="bottom_box">
<button @click="submit_btn()">
下載
</button>
</div>
<Pop-up ref="mPopUp">
<div slot="popupContent">
<div class="steerTop">
<div class="steerArrowBox">
<img class="steerArrow" src="@/assets/images/arrow.png" />
</div>
<div class="steerWordingBox">
<img class="steerWording" src="@/assets/images/steerWording.png" />
</div>
</div>
<img class="steerImg" src="@/assets/images/steer.png" />
</div>
</Pop-up>
</div>
</template>
<script>
import { _loadFile } from "@/utils/common";
import { isWeChat, downloadform } from "@/utils/util";
import PopUp from "components/component/PopUp";
export default {
components: {
PopUp
},
data() {
return {
pages: [],
scaleCount: 0,
scale: 1.1,
imageUrl: "",
toLink: ""
};
},
mounted() {
this.initPage();
},
methods: {
initPage() {
this.toLink = decodeURIComponent(this.$route.query.toLink);
_loadFile.call(this, location.origin + this.toLink);
this.submit_btn();
},
scaleD() {
this.scaleCount++;
this.$refs.pdf.forEach(item => {
let widthTemp = item.style.width.split("px")[0];
let heightTemp = item.style.height.split("px")[0];
item.style.width = parseInt(widthTemp) * parseFloat(this.scale) + "px";
item.style.height = parseInt(heightTemp) * parseFloat(this.scale) + "px";
});
},
scaleX() {
if (this.scaleCount == 0) {
return;
}
this.$refs.pdf.forEach(item => {
let widthTemp = item.style.width.split("px")[0];
let heightTemp = item.style.height.split("px")[0];
item.style.width = parseInt(widthTemp) / parseFloat(this.scale) + "px";
item.style.height = parseInt(heightTemp) / parseFloat(this.scale) + "px";
});
this.scaleCount--;
},
submit_btn() {
if (isWeChat()) {
// 內(nèi)部瀏覽器彈出引導(dǎo)
this.$refs.mPopUp.popupBgShow = true;
} else {
// 外部瀏覽器直接下載
downloadform(this.imageUrl + this.toLink);
}
}
}
};
</script>
<style lang="less" scoped>
.canvas-container {
margin: 0 auto;
iframe {
width: 100%;
height: calc(100vh - 4rem);
}
.canvas {
width: 100%;
height: calc(100vh - 2.8rem);
overflow-x: hidden;
overflow-y: auto;
.canvasDiv {
border-bottom: 1px solid #ccc;
}
}
.scroolBox {
overflow-x: auto !important;
overflow-y: auto !important;
}
.flexBox {
position: fixed;
right: 0.2rem;
top: 1.4rem;
padding: 0.1rem;
background-color: rgba(244, 244, 244, 0.6);
border-radius: 0.4rem;
overflow: hidden;
.big {
width: 0.58rem;
}
.small {
width: 0.58rem;
}
}
.bottom_box {
padding: 0 0.48rem 0 0.48rem;
height: 1.6rem;
.note {
font-size: 0.3rem;
color: #999;
word-wrap: break-word;
}
.btn-disable {
opacity: 0.3;
}
}
.steerTop {
position: fixed;
top: 0;
right: 0;
left: 0;
margin: auto;
.steerArrowBox {
margin-top: 2vw;
padding: 2vw;
text-align: right;
.steerArrow {
width: 20%;
transform: rotateZ(342deg);
animation: beat 1s linear infinite;
}
}
@keyframes beat {
0% {
margin-top: 2vw;
}
50% {
margin-top: 4vw;
}
100% {
margin-top: 2vw;
}
}
.steerWordingBox {
padding: 2vw;
text-align: center;
.steerWording {
width: 50%;
}
}
}
.steerImg {
width: 100%;
}
}
</style>
安卓用戶，手動(dòng)點(diǎn)擊右上角打開其他瀏覽器。用戶都是懶蛋，如果想讓懶蛋們體驗(yàn)更好一點(diǎn)，也可以，用下邊的方式，需要使用到blob鏈接，我在這里把后端傳的base64轉(zhuǎn)為 blob鏈接，使用方式：
export const savePicture = (base64, fileName = "下載文件（測(cè)試）.pdf") => {
var arr = base64.split(",");
var bytes = atob(arr[1]);
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
var blob = new Blob([ab], { type: "application/octet-stream" });
var url = URL.createObjectURL(blob);
const el = document.createElement("a");
el.style.display = "none";
el.setAttribute("target", "_blank");
fileName && el.setAttribute("download", fileName);
el.href = url;
document.body.appendChild(el);
el.click();
document.body.removeChild(el);
};
下載方式：（此時(shí)點(diǎn)擊按鈕會(huì)主動(dòng)彈出在瀏覽器打開彈窗，無需用戶點(diǎn)擊右上角，此方法必須要blob鏈接，此方法必須要blob鏈接，此方法必須要blob鏈接）:文章來源：http://www.zghlxwxcb.cn/news/detail-430617.html
import { savePicture } from "@/utils/util";
download() {
if (appSource() !== "ios")
savePicture("data:application/pdf;base64," + res.base64);
},
最優(yōu)版本已經(jīng)更新，下方點(diǎn)擊進(jìn)入
https://blog.csdn.net/qq_43586648/article/details/126894378?spm=1001.2014.3001.5501文章來源地址http://www.zghlxwxcb.cn/news/detail-430617.html
到了這里，關(guān)于微信公眾號(hào)內(nèi)下載pdf等文件，受微信所限制，安卓和IOS不同處理方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
