Vue支持预览 docx格式，xlsx格式，pdf格式的文件

最新推荐文章于 2024-06-22 13:41:01 发布

许......

最新推荐文章于 2024-06-22 13:41:01 发布

阅读量11

点赞数

文章标签： vue.js pdf arcgis 前端 javascript

本文链接：https://blog.csdn.net/xzy__007/article/details/139920790

版权

如需要，请访问以下地址
docx-preview, luckyexcel 配置文件与node服务仓库地址

1 预览docx格式文档

配置文件存放位置

1.1 引入相关配置文件

docx预览会使用 docx-preview
如果直接使用npm包，当解析时出现如下错误的话，就使用下面的方法，如果没报错，就正常引入使用即可，不需要把打包后的代码引入到入口文件里。

效果图
直接把 docx-preview打包后的代码直接引入到入口文件里 -- 如果未报错则跳过这一步

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="<%= BASE_URL %>static/config.js"></script>
    <!--------docx-preview配置文件--------->
    <script src="./docxPreview/polyfill.min.js"></script>
    <script src="./docxPreview/jszip.min.js"></script>
    <script src="./docxPreview/docx-preview.min.js"></script>
    <script src="./docxPreview/docx-preview.min.js.map"></script>

  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

docx-previewgithub地址： https://github.com/VolodymyrBaydalka/docxjs

1.2 预览docx格式文件

<template>
  <div class="center">
    <div class="center-file" id="center-file">
  </div>
</template>

<script>
import { defaultOptions, renderAsync } from "docx-preview";
import axios from "axios";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {};
  },

  computed: {},

  watch: {},
  created() {
    this.init();
  },

  methods: {
    init() {
      axios({
        method: "GET",
        url: "http://127.0.0.1:8899/file",
        params: {},
        responseType: "blob",
      }).then(function (data) {
        // docx
        renderAsync(data.data, document.getElementById("center-file"), null, {
          className: "docx", // 默认和文档样式类的类名/前缀
          inWrapper: false, // 启用围绕文档内容渲染包装器
          ignoreWidth: false, // 禁止页面渲染宽度
          ignoreHeight: false, // 禁止页面渲染高度
          ignoreFonts: false, // 禁止字体渲染
          breakPages: false, // 在分页符上启用分页
          ignoreLastRenderedPageBreak: false, //禁用lastRenderedPageBreak元素的分页
          experimental: false, //启用实验性功能(制表符停止计算)
          trimXmlDeclaration: false, //如果为真，xml声明将在解析之前从xml文档中删除
          debug: false, // 启用额外的日志记录
        });
      });
    },
  },

  mounted() {},
};
</script> 

<style scoped lang="scss">
.center {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  padding: 24px;
  box-sizing: border-box;
  .center-file {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
  }
}
</style>

特别注意：返回值是用的 blob格式接收的，但只需要红框里的数据，如发现报错(描述具体为不是文件等等)麻烦打印下返回值跟此图对照，如还未解决麻烦评论区留言！

注意点，下面的同理

docx效果图

2 xlsx格式文件预览

xlsx预览会使用 luckyexcel
如果直接使用npm包，当出现如下错误时，使用以下解决方案，如果没报错，就正常引入使用即可，不需要把打包后的代码引入到入口文件里。

效果图
直接把 luckyexcel打包后的代码直接引入到入口文件里

2.1 引入相关配置文件 -- 如果未报错则跳过这一步

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="<%= BASE_URL %>static/config.js"></script>
    <!---------luckyexcel 配置文件-------->
    <link rel="stylesheet" href="./luckyexcelConfig/pluginsCss.css" />
    <link rel="stylesheet" href="./luckyexcelConfig/plugins.css" />
    <link rel="stylesheet" href="./luckyexcelConfig/luckysheet.css" />
    <link rel="stylesheet" href="./luckyexcelConfig/iconfont.css" />
    <script src="./luckyexcelConfig/plugin.js"></script>
    <script src="./luckyexcelConfig/luckysheet.umd.js"></script>
    <script src="./luckyexcelConfig/luckysheet.umd.js.map"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

luckyexcelgithub地址： https://github.com/dream-num/Luckyexcel

1.2 预览xlsx格式文件

<template>
  <div class="center">
    <div class="center-file" id="center-file">
  </div>
</template>

<script>
import LuckyExcel from "luckyexcel";
import axios from "axios";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {};
  },

  computed: {},

  watch: {},
  created() {
    this.init();
  },

  methods: {
    init() {
      axios({
        method: "GET",
        url: "http://127.0.0.1:8899/file",
        params: {},
        responseType: "blob",
      }).then(function (data) {
        // xlsx
        LuckyExcel.transformExcelToLucky(
            data.data,
            (exportJson, luckysheetfile) => {
              // luckysheet.destroy(); // 卸载表格
              // 重新创建新表格
              luckysheet.create({
                container: "center-file", // 设定DOM容器的id
                title: "luckysheet", //表 头名
                lang: "zh", //中文
                plugins: ["chart"],
                showinfobar: false, // 是否显示顶部信息栏
                // showstatisticBar: false, // 是否显示底部计数栏
                // allowEdit: false, // 是否允许前台编辑
                enableAddRow: false, // 是否允许增加行
                enableAddCol: false, // 是否允许增加列
                // sheetFormulaBar: false, // 是否显示公式栏
                // enableAddBackTop: false, //返回头部按钮
                data: exportJson.sheets, //表格内容
                // showtoolbar: false, // 是否显示工具栏
                title: exportJson.info.name, //表格标题
              });
            }
          );
      });
    },
  },

  mounted() {},
};
</script> 

<style scoped lang="scss">
.center {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  padding: 24px;
  box-sizing: border-box;
  .center-file {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
  }
}
</style>

xlsx效果图

2 pdf格式文件预览

浏览器本身是支持pdf格式文件预览的，除非想在界面里内嵌一个区域。

1.1 下载所需配置包

特别注意：vue-pdf需要文档的http地址

npm i vue-pdf

1.2 预览pdf格式文件

<template>
  <div class="center">
      <pdf
          ref="pdf"
          v-for="i in numPages"
          :key="i"
          :src="url"
          :page="i"
        ></pdf>
  </div>
</template>

<script>
import axios from "axios";
import pdf from "vue-pdf";

export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {
      url: null,
      numPages: null,
    };
  },

  computed: {},

  watch: {},
  created() {
    this.init();
  },

  methods: {
    init() {
      axios({
        method: "GET",
        url: "http://127.0.0.1:8899/file",
        params: {},
        responseType: "blob",
      }).then(function (data) {
        // pdf
        // vue-pdf 包不允许本地localhost与任何地址进行访问--发到服务器这个问题自然就没了
       // 文件流里会自带服务端文件地址，如不理解请翻到1.2区域返回值展示图(特别注意红字下那个图)此处不再贴图。
        this.url = data.config.url;
        let loadingTask = pdf.createLoadingTask(this.url);
        loadingTask.promise
          .then((pdf) => {
            this.numPages = pdf.numPages;
          })
          .catch((err) => {
            console.error("pdf 加载失败", err);
            this.$message.error("pdf 加载失败");
          });
      });
    },
  },

  mounted() {},
};
</script> 

<style scoped lang="scss">
.center {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  padding: 24px;
  box-sizing: border-box;
  .center-file {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
  }
}
</style>

许......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue支持预览 docx格式，xlsx格式，pdf格式的文件

如需要，请访问以下地址docx-preview, luckyexcel 配置文件与node服务仓库地址1 预览docx格式文档配置文件存放位置1.1 引入相关配置文件docx预览会使用 docx-preview如果直接使用npm包，当解析时出现如下错误的话，就使用下面的方法，如果没报错，就正常引入使用即可，不需要把打包后的代码引入到入口文件里。效果图直...
复制链接

扫一扫