需求:项目分PC端和移动端,PC端(react)以实现列表页附件下载,现需同步移动端(vue)h5页面在原有的列表页中增加一行查看(下载)附件。
只写结构,暂不考虑其他,增加附件行的代码如下:
<div>
<span>
附件:
<a
:href=''
{
{
'附件名称'}}>
</a>
</span>
</div>
点击列表页本身的每一个方框会跳转一个详情页,同理点击下载发票附件时也会,需要处理一下点击a标签时的穿透问题。这里我给span加上一个点击事件,事件里边写上event.stopPropagation()
<span @click="stopBubble()">
methods:{
stopBubble(){
console.log('阻止穿透,启动!')
event.stopPropagation()
}
}
大体结构定下,然后考虑两个问题:
1)href里怎么写
2)附件名称的展示
先看附件名称,可能有附件,也可能没有、有附件时显示附件名称,没有附件是显示“-”,使用三目运算符判断是否有附件可以很好的解决。
{
{
item.attachment?item.attachment.fileName:“-” }}
再看href,有附件的情况点击a标签可以下载,没有附件的情况肯定不能下载。PC端对href也使用了三目运算符,不能下载的情况给了‘#’。移动端这里我给了展示附件的div写了v-if,没有附件时就不显示附件行。
<div v-if="item.attachment">
href的拼写要获取url和token,目前已知
:href="`/api/attachments/download/${url}?access_token=${token}`"
其中url和token为变量,写法为${变量名}。
url同PC端,写法略有不同,移动端中为item.attachment.attachmentOid。
token登陆后固定,登录一次改一次。token在PC端中存放在sessionStorage中,sessionStorage.getItem(“token”)即可获取;而在移动端中,token存放在localStorage中,获取为localStorage(‘local.token’),还没完!这里是json字符串,需要把它转为json数据,,JSON.parse(localStorage(‘local.token’)).value。
拿到了url和token,美滋滋的写到href里,开心!
:href="`/api/attachments/download/${item.attachment.attachmentOid}?access_token=${JSON.parse(localStorage('local.token')).value}`"
报错‘localStorage’is not defined, ‘getItem’ of undefined。惊不惊喜,意不意外!
去data()里定义个变量接收token这个值
data(){
return {
token: JSON.parse(localStorage('local.token')).value,
}
}
然后href中
:href="`/api/attachments/download/${item.attachment.attachmentOid}?access_token=${token}`"
较完整代码大体如下
// html/template
<div v-if="item.attachment">
<span @click="stopBubble()">
附件:
<a
:href="`/api/attachments/download/${item.attachment.attachmentOid}?access_token=${token}`"
{
{
item.attachment?item.attachment.fileName:“-” }}>
</a>
</span>
</div>
// data
data(){
return {
token: JSON.parse(localStorage('local.token')).value,
}
}
// methods
methods:{
stopBubble(){
console.log('阻止穿透,启动!')
event.stopPropagation()
}
}
这里有个问题,就是如果是vue移动端h5页面,这么写的情况下,浏览器模拟页面可以实现下载,但在真机调试却不行。
解决真机问题
用到了KK JS SDK,项目用的1.3.4版本。
KK: link.
项目中本身就有引用过KK,在这里我只是在当前需求页面的代码文件中引入这个下载方法。
修改a标签中的href为点击事件
<a
@click="fileDownload(item)"
{
{
item.attachment