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
·
需求是附件上传功能,
实现方式是将文件的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,图片
更多推荐
已为社区贡献8条内容
所有评论(0)