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"
                })
            }
        }
上一篇下一篇

猜你喜欢

热点阅读