vue 读取 txt

项目中难免会碰到要显示各种协议， 像这样

 

这时，产品会给你发一个word 文档，通常都有好几页面，这样大篇幅的文本，直接复制到页面就不合适了，再加上还要处理换行，费时费力，能够直接获取word内容，展示到页面最好不过，由于获取word乱码，这里暂用txt文本代替

export default {
    date(){
        return {
            agreement:{
                user:"",
                private:""
            }
        }
    }
    mounted (){
        this.agreement.user = this.readFile('/user.txt')
        this.agreement.private = this.readFile('/private.txt')            
    },
    methods :{
        readFile (filePath){
         // 创建一个新的xhr对象
             let xhr = null, okStatus = document.location.protocol === 'file' ? 0 : 200
             xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')      
             xhr.open('GET', filePath, false)
             xhr.overrideMimeType('text/html;charset=utf-8')
             xhr.send(null)
             return xhr.status === okStatus ? xhr.responseText : null
        }
    }
}

这样，只要在弹窗显示相关 data 值，是不是优雅多了

<el-dialog title="《XXX隐私条款》" :visible.sync="privatePopShow" width="30%" align="center">
    <div class="agreement"><pre>{{agreement.private}}</pre></div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="privatePopShow = false">关 闭</el-button>
    </span>
</el-dialog>

 

再加上换行等样式

.agreement-txt
        text-align left
        line-height 25px
        white-space break-spaces    /* pre-line、pre-wrap 也可以 */
        font-family Avenir, Helvetica, Arial, sans-serif

效果：