一、顯示部分（組件我使用的vuetify）
<template> <v-container fluid> <v-card width="100%" max-width="100%" class="mb-5"> <div class="mb-2 d-flex align-center justify-start"> <v-btn color="primary" class="mr-50" @click="back" small="">返回行程列表</v-btn> </div> <img :src="codeImg" alt="" /> </v-card> </v-container> </template>
<script>
import * as api from '../../../api/index';
export default {
data() {
return {
lineId: '',
driverId: '',
channel: 1,
codeImg: '',
};
},
mounted() {
this.lineId = Number(this.$route.params.lineId);
this.driverId = Number(this.$route.params.driverId);
this.channel = Number(this.$route.params.channel);
this.getTripQrCode();
},
methods: {
getTripQrCode() {
const data = {
lineId: this.lineId,
channel: this.channel,
};
//這里注意調用接口時，要加上：responseType: 'arraybuffer',
api.main
.op_line_qrcode_generateTripQrCode_get({
params: data,
responseType: 'arraybuffer',
})
// eslint-disable-next-line promise/always-return
.then(res => {
//這里就是將得到的圖片流轉換成blob類型
const blob = new Blob([res.data], {
type: 'application/png;charset=utf-8',
});
const url = window.URL.createObjectURL(blob);
this.codeImg = url;
})
.catch(err => {
console.log(err);
});
},
back() {
this.$router.go(-1);
},
},
};
</script>