vue —— word、pdf、excel 线上地址预览

bug

• bug：pdf预览会出现后面空白页，建议使用 iframe标签直接显示pdf
• dwg格式（CAD）可以转化为图片格式预览

预览地址

word

//docx文档预览组件 
npm install @vue-office/docx 
//excel文档预览组件 
npm install @vue-office/excel 
//pdf文档预览组件 
npm install @vue-office/pdf

<template>
  <div>
    <vue-office-docx
      :src="docx"
      style="height: 100vh"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
  </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
console.log(VueOfficeDocx);
//引入相关样式
import "@vue-office/docx/lib/index.css";
export default {
  name: "VueOfficeDocxDemo",
  components: {
    VueOfficeDocx,
  },
  data() {
    return {
      docx: "http://static.shanhuxueyuan.com/test.docx",
    };
  },
  methods: {
    renderedHandler() {
      console.log("渲染完成");
    },
    errorHandler() {
      console.log("渲染失败");
    },
  },
};
</script>

<style scoped>
</style>

pdf

<template>
    <vue-office-pdf
        :src="pdf"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {
    name: "VueOfficePdfDemo",
    components: {
        VueOfficePdf
    },
    data() {
        return {
            pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
};
</script>

<style scoped>

</style>

excel

<template>
   <div>
       <vue-office-excel
           :src="excel"
           :options="options"
           style="height: 100vh;"
           @rendered="renderedHandler"
           @error="errorHandler"
       />
   </div>
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
    name: "VueOfficeExcelDemo",
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            options:{
                xls: false,       //预览xlsx文件设为false；预览xls文件设为true
                minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
                minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
                widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
                heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
                beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
                transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
            },
            excel: 'http://static.shanhuxueyuan.com/test.xlsx'//设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
};
</script>

<style scoped>

</style>

最终预览组件

<template>
  <div class="w100" v-if="show">
    <dv-border-box-10
      :color="['rgba(2, 208, 249,.5)', '#0dcff2']"
      class="w100 h100"
    >
      <div class="w100 h100 plrRem-30 ptbRem-16 flex flex-column">
        <div class="flex1">
          <div class="flex_l sizeRem-16 bold">
            <img
              src="../components/img/index1-title.png"
              alt=""
              style="width: 40px"
            />
            文件预览
          </div>
          <i class="el-icon-circle-close sizeRem-30" @click="show = false"></i>
        </div>
        <div class="scroll flex-1">
          <vue-office-docx
            v-if="type == 1"
            :src="url"
            class="h100"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
          <!-- <vue-office-pdf
            v-if="type == 2"
            :src="url"
            @rendered="renderedHandler"
            @error="errorHandler"
          /> -->
          <iframe
            v-if="type == 2"
            :src="url + '#view=FitH,top'"
            frameborder="0"
            style="width: 100%; height: 100%; overflow-y: scroll"
          ></iframe>
          <vue-office-excel
            v-if="type == 3"
            :src="url"
            :options="options"
            style="height: 100vh"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
          <el-image
            v-if="type == 4"
            class="w100 h100"
            :src="url"
            fit="contain"
            :preview-src-list="[url]"
          ></el-image>
        </div>
      </div>
    </dv-border-box-10>
  </div>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";

// npm install @vue-office/pdf
// import VueOfficePdf from "@vue-office/pdf";

import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/excel/lib/index.css";

export default {
  name: "VueOfficeDocxDemo",
  components: {
    VueOfficeDocx,
    // VueOfficePdf,
    VueOfficeExcel,
  },
  data() {
    return {
      type: null, // 1 word 2 pdf 3 excel 4 image
      show: false,
      url: "",
      docx: "http://static.shanhuxueyuan.com/test.docx",
      pdf: "http://static.shanhuxueyuan.com/test.pdf", //设置文档地址
      options: {
        xls: false, //预览xlsx文件设为false；预览xls文件设为true
        minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
        minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
        widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
        heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
        beforeTransformData: (workbookData) => {
          return workbookData;
        }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
        transformData: (workbookData) => {
          return workbookData;
        }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
      },
      excel: "http://static.shanhuxueyuan.com/test.xlsx", //设置文档地址
    };
  },

  mounted() {},
  // 销毁定时器
  beforeDestroy() {},

  methods: {
    init(url, solo) {
      if (!solo) {
        this.url =
          (location.protocol.includes("https")
            ? location.origin
            : "http://192.168.0.19:12020") + url;
      } else {
        this.url = url;
      }
      let type = url.split(".")[url.split(".").length - 1].split("?")[0];
      console.log(type, 666, this.url, location.origin, location.protocol);
      this.show = true;
      if (["doc", "docx"].includes(type)) {
        this.type = 1;
      } else if (["pdf"].includes(type)) {
        this.type = 2;
      } else if (["xls", "xlsx"].includes(type)) {
        this.type = 3;
        this.options.xls = type == "xls" ? true : false;
      } else {
        this.type = 4;
      }
    },
    renderedHandler() {
      console.log("渲染完成");
    },
    errorHandler() {
      this.$message({
        message: "渲染失败，请检查文件是否有误",
        type: "error",
        customClass: "messageIndex",
      });
    },
    close() {
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../components/css/rem.scss";
</style>