美文网首页
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