【vue】a链接跳转新页面+window.open跳转新页面，a链接下载pdf格式文件

下午做到发票预览功能，有个判断条件，根据某个字段的状态选择直接展示或调接口展示

不是很难的需求，只是自己掉进不思考的脑洞里，导致自己花了点时间才弄出来，还是记录一下

先说预览

 <a-table ref="tableOrder" size="default" :columns="columns" :data="loadData">
    
      <template slot="action" slot-scope="text, record">
        <span>
          <a @click.stop="handleViewInvoiceDetails(record)">详情</a>
          <a-divider type="vertical"></a-divider>
          <span v-if="record.fInMailState === 3">
            <span v-if="record.fVcPreviewUrl">//根据fVcPreviewUrl是否有值为判断条件，值就是pdf地址。没有就调接口，有就直接展示
              <a target="_blank" :href="record.fVcPreviewUrl">预览</a>//target="_blank" 在新页面打开
            </span>
            <span v-else @click.stop="preViewInvoiceDetails(record)"> //值为null的时候调接口        
              预览
            </span>
            <a-divider type="vertical"></a-divider>           
            <a target="" :href="record.fVcSaveUrl" download="">下载</a>
          </span>       
        </span>   
      </template>
    </a-table>

 async preViewInvoiceDetails(row) {
      const data = await invoicePreview({ fPkReceiptRecordId: row.fPkReceiptRecordId })
      window.open(data.data, '_blank')//  window.open在新页面中打开窗口
      类似于HTEL:<a href="https://www.xxx/" title="起点" target="_blank">起点</a>
     //window.location.href在当前页打开窗口 
     //类似于HTML:<a href="https://www.xxx/" title="测试">Test</a>
    },

我下午错误的思路是都用了a链接，调接口之后赋值给previewUrl，点击的时候直接跳转到首页了，应该是因为同步异步的问题吧，总之就是搞不出来

 <!-- <a target="_blank" :href="previewUrl" >预览</a> -->

然后是下载，下载也很简单，还是a链接，只是多加了一个download，可以实现a链接模拟文件下载的效果

<a target="" :href="record.fVcSaveUrl" download="">下载</a>