美文网首页
data:text/html;base64转化为可显示的内容

data:text/html;base64转化为可显示的内容

作者: 花影_62b4 | 来源:发表于2021-07-08 18:00 被阅读0次
页面展示
 <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"
                })
            }
        }

相关文章

网友评论

      本文标题:data:text/html;base64转化为可显示的内容

      本文链接:https://www.haomeiwen.com/subject/ypptpltx.html