data:text/html;base64转化为可显示的内容
2021-07-08 本文已影响0人
花影_62b4
页面展示
<div class="content" v-html='bookUrl'></div>
js:
created(){
console.log(this.bookHtml)
//this.bookHtml是后台返回的base64数据
var imgFile = this.dataURLtoFile('data:text/html;base64,'+this.bookHtml)
console.log(imgFile)
//imgFile 转化成.html的文件,因此需要读取文件内容后再渲染到页面上
var reader = new FileReader();
reader.onload = ()=> {
// 语句是为了显示内容换行
this.bookUrl=reader.result.replace(/\n/g,"<br/>");
console.log(this.bookUrl)
}
reader.readAsText(imgFile,'utf-8');
},
methods:{
dataURLtoFile(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.html`, {
type: "text/html"
})
}
}