word 在线预览 H5 纯浏览器实现

上传并预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id="document" type="file" onchange="onGetFile(this)" accept=".docx"/>
<br>
<div id="container"></div>
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://unpkg.com/docx-preview@0.2.0-next.1/dist/docx-preview.min.js"></script>
<script>
    function onGetFile(el) {
        var file = el.files[0]
        var options = {inWrapper: false, ignoreWidth: true, ignoreHeight: true}
        docx.renderAsync(
            file,
            document.getElementById("container"),
            null,
            options
        ).then(
            x => console.log("docx: finished")
        );
    }
</script>
</body>
</html>

使用远程文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="container"></div>
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://unpkg.com/docx-preview@0.2.0-next.1/dist/docx-preview.min.js"></script>

<script>
    const options = {method: 'get', responseType: 'blob'}
    fetch('http://localhost:63343/pdf_word_xls_ppt/test.docx', options).then(
        res => {
            const options = {inWrapper: false, ignoreWidth: true, ignoreHeight: true}
            docx.renderAsync(res.blob(), document.getElementById("container"), null, options)
        })
</script>
</body>
</html>

mammoth

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
</head>

<body>
<div class="container">
    <input id="document" type="file"/>
    <div class="row" style="width: 100%;">
        <div class="span8">
            <div id="output" class="well"></div>
            <button onclick="preview()">远程文件</button>
            <table id="TableToExport"></table>
            <button onclick="preview_excel()"><b>Export as XLSX</b></button>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
    document.getElementById("document")
        .addEventListener("change", readFileInputEventAsArrayBuffer, false);

    function displayResult(result) {
        let html = result.value;
        // let newHTML = html.replace(//g, '')
        //     .replace('<h1>', '<h1 style="text-align: center;">')
        //     .replace(/<table>/g, '<table style="border-collapse: collapse;">')
        //     .replace(/<tr>/g, '<tr style="height: 30px;">')
        //     .replace(/<td>/g, '<td style="border: 1px solid pink;">')
        //     .replace(/<p>/g, '<p style="text-indent: 2em;">');
        document.getElementById("output").innerHTML = html;
    }

    function readFileInputEventAsArrayBuffer(event) {
        var file = event.target.files[0];
        console.log(file)
        var reader = new FileReader();

        reader.onload = function (loadEvent) {
            var arrayBuffer = loadEvent.target.result;//arrayBuffer
            mammoth.convertToHtml({arrayBuffer: arrayBuffer})
                .then(displayResult)
                .done();
        };

        reader.readAsArrayBuffer(file);
    }

    function preview() {
        fetch('template.docx')
            .then(response => response.arrayBuffer())
            .then(arrayBuffer => {
                mammoth.convertToHtml({arrayBuffer: arrayBuffer})
                    .then(display_result)
                    .catch(error => console.error('Error converting to HTML:', error));
            })
            .catch(error => console.error('Error fetching document:', error));
    }

    function display_result(result) {
        document.getElementById("output").innerHTML = result.value;
    }


</script>
</body>

</html>
posted @ 2023-08-14 14:37  vx_guanchaoguo0  阅读(393)  评论(0)  编辑  收藏  举报