IOS webview vue word预览工作记录0518_前端 ios预览world-CSDN博客

本文链接：https://blog.csdn.net/zyz_3362/article/details/116997061

本文记录了如何在iOS WebView中利用Mammoth插件实现Word文档的预览。通过npm安装Mammoth，将Word转换为HTML，以解决iOS不能直接打开或下载外部文档的问题。

摘要由CSDN通过智能技术生成

用的mammoth插件需要先npm安装

ios不可以直接打开外部文档链接或者下载所以该插件原理是将word文档转为html从而达到预览的效果

看到了别的妹妹发的文跟着做了下果然解决了问题




<template>

<div>

    <header-back></header-back>

    <div ref="box" class="mainBox" id="mainBox">

        <div ref="docPreview"></div>

    </div>

</div>

</template>

<script>

//头部导航组件引入

import HeaderBack from '@/components/header-back';
//引入插件
import mammoth from 'mammoth'

export default {

    components: {HeaderBack},

    data() {

        return {

            url:''

        }



    },

     mounted() {
      //获取传到该页面的word文档地址
       this.url=this.$route.params.pageSrc;
        //预览函数
       this.previewFile();

    },

    methods: {

        previewFile(){

            let _this=this;

            try {

     

                var xhr = new XMLHttpRequest();

                xhr.open("GET", this.url);

                xhr.responseType = "arraybuffer";

                xhr.onload = function(e) {

            

                    var arrayBuffer = xhr.response; //arrayBuffer



                    mammoth

                    .convertToHtml({arrayBuffer: arrayBuffer })

                    .then(displayResult)

                    .done();



                    function displayResult(result) {

            

                    _this.$refs.docPreview.innerHTML = result.value || "";

                    }

                };

                xhr.send();

            } catch (e) {

        

                    console.log(e);

            }

        }

    }}

</script>

<style scoped>

.mainBox {

    word-break: break-all;

    background: #fafafb;

    position: absolute;

    top: 1.6rem;

    left: 0px;

    height: 91vh;

    width: 100%;

    overflow: scroll;

    border-radius: 32px 32px 0 0;

    z-index: 999;

    font-size: 16px;

    text-align:center

}
//因为ios不可以直接打开外部文件链接 所以这个插件的原理是把word转成html来嵌入页面 所以word内容样式可以随意写
#mainBox >>> img{

    width: 90%;

}

#mainBox >>> p{

    width: 90%;

    margin-left: 5%;

}

</style>