Problem description

This article has documented the ability to preview word documents. Need to use:

  • Front end:vue
  • The backend:express
  • Plug-in:docx-preview

Thought analysis

  1. The backend Express code reads in the folder.docxType of file
  2. It is then returned to the front end as a readable streamblobStream file
  3. After the front-end receives the stream file returned by the back-end, executedocx-previewThe plug-inrenderAsyncMethod to render the preview effect

Let’s have a look at the renderings first

rendering

code

Back-end Express code

// Import the file module
const fs = require("fs")

// Returns the word file interface
route.get('/getDoc'.(req, res) = > {

  // Let's say our word files are stored in the doc directory
  let docxUrl = './doc/ docx'

  // Allow cross-domain
  res.header("Access-Control-Allow-Origin"."*");

  // Set the request header
  res.writeHead(200, {
    // Set the file type to docx
    'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',})// Create a readable stream
  let readStream = fs.createReadStream(docxUrl)

  // Return the read results to the front end as a pipe stream
  readStream.pipe(res);

})
Copy the code

Front-end VUE code

Note that vue projects need to download plug-ins first

cnpm i docx-preview --save

<template>
  <div>
    <el-button @click="goPreview">Click to preview the Word file</el-button>
    <el-button @click="downLoad">Click to download the Word file</el-button>
    <div class="docWrap">
      <! Where to preview the file (for rendering) -->
      <div ref="file"></div>
    </div>
  </div>
</template>

<script>
// Use axios to send requests
import axios from "axios";
// Introduce the docx-Preview plugin
let docx = require("docx-preview");
export default {
  mounted() {
    console.log("Render using the plugin's renderAsync method.", docx); //
  },
  methods: {
    / / the preview
    goPreview() {
      axios({
        method: "get".responseType: "blob".// The blob type is specified because it is a stream file
        url: "http://ashuai.work:10000/getDoc".// Own server, provide a word download file interface
      }).then(({ data }) = > {
        console.log(data); // The back end returns a stream file
        docx.renderAsync(data, this.$refs.file); // Render to page
      });
    },
    / / download
    downLoad() {
      axios({
        method: "get".responseType: "blob".// The blob type is specified because it is a stream file
        url: "http://ashuai.work:10000/getDoc".// Own server, provide a word download file interface
      }).then(({ data }) = > {
        console.log(data); // The back end returns a stream file
        const blob = new Blob([data]); // Transfer the result to the stream object
        var a = document.createElement("a"); // Create a  tag
        a.href = URL.createObjectURL(blob); // Write the stream file to the href value of the a tag
        a.download = Docx"; // Set the file name
        a.style.display = "none"; // hide the a tag
        document.body.appendChild(a); // Append the A tag to the document object
        a.click(); // the href of a tag will be read, and the browser will automatically download
        a.remove(); // Delete a tag when used up}); ,}}};</script>
<style lang="less" scoped>
.docWrap{// Specify the style widthwidth: 900px;
  overflow-x: auto;
}
</style>
Copy the code

In order to facilitate the debugging effect, so I also provide a back-end interface, if you do not want to write node interface directly use mine, interface in the above vUE code, directly copy and paste to run

conclusion

A good memory is better than a bad pen. If it helps you, you are welcome to move your little hands and point a praise