需求是附件上传功能,
实现方式是将文件的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,图片

Logo

前往低代码交流专区

更多推荐