insira a descrição da imagem aqui

Introdução

Encontrei um requisito no projeto, o requisito geral é o seguinte: antes de fazer upload de um arquivo, o usuário precisa primeiro visualizar o conteúdo, confirmar se o conteúdo está correto e depois fazer o upload se estiver correto ;
então isso envolverá uma visualização do documento antes de carregar a operação, o seguinte é um registro de pisar no registro do poço

pré-visualização docx

Esta é uma biblioteca JavaScript front-end pura . Sua vantagem é que ela pode visualizar arquivos online sem depender do back-end. A desvantagem é que ela não suporta doc, não suporta doc, não suporta doc , e o importante coisa é dita três vezes; O endereço do github é o seguinte: docx-preview , amigos interessados podem dar uma olhada na introdução oficial;.docx

Instalar

npm install docx-preview -S

Se a instalação falhar o tempo todo, você pode tentar usá-lo cnpmpara instalar

cnpm install docx-preview -S

Além disso, devido à necessidade de parsing , é necessário utilizaradicionalInstale e introduza uma biblioteca de análise jszip . Como a biblioteca não está na forma de um módulo, ela precisa ser introduzida na tag de cabeçalho em html . O endereço do arquivo: https://unpkg.com/jszip/dist/jszip. min.js

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    </head>
    <body>
    </body>
</html>

Recomenda-se baixar o arquivo diretamente no projeto e colocá-lo dentro do projeto;

usar

Vamos dar uma olhada no exemplo oficial primeiro

<!--optional polyfill for promise-->
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<!--lib uses jszip-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="docx-preview.min.js"></script>
<script>
    var docData = <document Blob>;

    docx.renderAsync(docData, document.getElementById("container"))
        .then(x => console.log("docx: finished"));
</script>
<body>
    ...
    <div id="container"></div>
    ...
</body>

Simplificando, ele possui 3 parâmetros, o primeiro parâmetro é o fluxo de dados do arquivo recebido , o segundo parâmetro é o contêiner e possui uma função de retorno de chamada, que será executada com sucesso, mas não é isso Para todas as APIs, você pode ir ao github para encontrar as APIs específicas. Essas APIs devem ser usadas muito pouco, e essas poucas são suficientes;

Exemplo de uso do docx-preview no Vue

Este capítulo implementa um exemplo de seleção de arquivos localmente e exibição online. As etapas gerais são as seguintes:

Selecione um arquivo docx e obtenha o arquivo;
Converta o arquivo para o formato blob;
Passe a exibição do fluxo de dados no formato Blob para o dox-preview e exiba-o;

O primeiro passo é o primeiro passo , a parte Html é a seguinte, o IViewcomponente Upload组件usa elemento mesmo, o objetivo é obter o arquivo selecionado através do componente

<Upload
    action
    name="file"
    id="file"
    multiple="multiple"
    :auto-upload="false"
    :before-upload="init"
>
    <Button size="small" type="primary">点击上传</Button>
</Upload>

Leia o arquivo depois de selecioná-lo

 init(file) {
    
    
    var reader = new FileReader();
    reader.onload = (e) => {
    
    

    };
    // 传入一个参数对象即可得到基于该参数对象的文本内容
    reader.readAsDataURL(file);
},

A segunda etapa é ler os dados do arquivo e convertê em um fluxo de dados no formato Blob

 let arr = e.target.result.split(",");
let data = window.atob(arr[1]);
let mime = arr[0].match(/:(.*?);/)[1];
let ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
    
    
    ia[i] = data.charCodeAt(i);
}
const blob = new Blob([ia], {
    
     type: mime });
console.log(blob);

O terceiro passo é docx-previewconectar o display

docx.renderAsync(blob, this.$refs.demoDocContainer).then(
    (x) => {
    
    
        console.log(x);
    }
); // 渲染到页面

A exibição pode ser concluída, o efeito é o seguinte:
insira a descrição da imagem aqui

O código completo é o seguinte

<template>
    <div id="app">
        <Upload
            action
            name="file"
            id="file"
            multiple="multiple"
            :auto-upload="false"
            :before-upload="init"
        >
            <Button size="small" type="primary">点击上传</Button>
        </Upload>
        <div class="doc-preview" ref="demoDocContainer">1</div>
    </div>
</template>
<script>
let docx = require("docx-preview");
export default {
    
    
    name: "docx-demo",
    methods: {
    
    
        init(file) {
    
    
            var reader = new FileReader();
            reader.onload = (e) => {
    
    
                let arr = e.target.result.split(",");
                let data = window.atob(arr[1]);
                let mime = arr[0].match(/:(.*?);/)[1];
                let ia = new Uint8Array(data.length);
                for (var i = 0; i < data.length; i++) {
    
    
                    ia[i] = data.charCodeAt(i);
                }
                const blob = new Blob([ia], {
    
     type: mime });
                docx.renderAsync(blob, this.$refs.demoDocContainer).then(
                    (x) => {
    
    
                        console.log(x);
                    }
                ); // 渲染到页面
            };
            // 传入一个参数对象即可得到基于该参数对象的文本内容
            reader.readAsDataURL(file);
        },
    },
};
</script>
<style lang="less">
#app {
    
    
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.doc-preview {
    
    
    width: 100%;
    height: 800px;
    background-color: #f5f5f5;
}
</style>

Manipulação de erros

Encontrou um erro no uso do uso, conforme segue
insira a descrição da imagem aqui

Posteriormente, descobriu-se que o motivo era que o formato de arquivo selecionado doc格式era , portanto não pôde ser reconhecido. Gostaria de enfatizar que este componente só pode reconhecer o formato docx e não oferece suporte ao reconhecimento de palavras no formato doc ;

reconhecimento de formato doc

Se você deve identificar arquivos em formato doc, então o front-end puro não deve funcionar (principalmente porque não encontrei um método adequado, se houver um cara grande que o estudou, por favor, deixe uma mensagem e me avise, muito obrigado), portanto, não importa qual dos seguintes O método requer a cooperação do plano de fundo e o método geral é o seguinte;

Converter para o formato PDF

Assim como no título, passe o arquivo em formato doc para o background, e após o background obtê-lo, converta-o para o formato PDF, o que será conveniente. A recepção pode exibir a recepção por meio de uma biblioteca de ferramentas pdfjssemelhante // mozilla.github.io/pdf.js/ , o uso específico pode ser visualizado no site oficial, se
você baixá-lo, pode baixá-lo do site oficial ou instalar no npm
insira a descrição da imagem aqui

Claro, além do pdfjs, existe outro método, que é exibir iframeatravés de .Esse método é mais simples, mas um pouco primitivo e, para ser honesto, Iframenão é mas é realmente fácil de usar em muitos casos. Por exemplo, agora, O uso é o seguinte

<iframe :src="url"></iframe>

A url é o endereço do arquivo em segundo plano. Devido às características do iframe, o arquivo exibido pelo caminho pode ser exibido diretamente na área...

resumo

Se você não precisa reconhecer arquivos doc, é recomendável usar docx-previewpara visualizar online.Se for compatível com doc , é recomendável converter para o formato PDF pdfjse Iframevisualizar através de ou outros arquivos de biblioteca;

O front-end implementa a visualização online de arquivos do Word