vue移动端h5中a标签下载/预览文件

需求：项目分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)"
	{