Not allowed to navigate top frame to data URL，前端页面打开新窗口预览base64数据遇到的问题解决

需求是附件上传功能，实现方式是将文件的base64存入库中，在需要下载的地方获取这个base64 前端框架用的vue 在下载这个base64文件的时候是没有问题的

<a :href="en.content" :download="en.name">{{ en.name }}</a>

但是如果想跳转新页面打开这个base64，会报以下错误

<a :href="en.content">{{ en.name }}</a>

在这里插入图片描述原因是Chrome出于安全考虑，禁止从页面打开 Data URI

这边选了一个变通的解决方案

<a style="margin-left:20px" @click="preView(en.content)">预览</a>

还是一个a标签，加一个点击事件

preView (content) {
      var string = content
      var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
      var x = window.open()
      x.document.open()
      x.document.write(iframe)
      x.document.close()
    },

点击事件中新建一个iframe，用这个iframe来显示数据。就可以实现了在这里插入图片描述浏览器默认支持的格式都可以预览，如：txt，pdf，图片