移動端和PC端無插件預覽PDF、OFD、Word等多種文檔

index.html

<script type="module">
import { createApp } from 'vue'
import XdocView from './XdocView.js'
createApp({
    components: {
        XdocView
    },
    data() {
        return {
            fileUrl: "https://view.xdocin.com/demo/view.docx"
        }
    }
}).mount('#app')
</script>
<div id="app">
    <ol>
    <xdoc-view :src="fileUrl" style="height:600px;"></xdoc-view>
    </ol>
</div>

XdocView.js

export default {
  name: "XdocView",
  data() {
    return {
      xsrc:""
    };
  },
  props: {
    src: String,
    watermark: String,
  },
  watch: {
    src: {
      handler(val) {
        this.genXsrc();
      },
      immediate: true
    },
    watermark: {
      handler(val) {
        this.genXsrc();
      },
      immediate: true
    }
  },
  methods: {
    genXsrc() {
      if (this.src) {
        //你的文檔地址
        var file = this.src;
        //XDOC文檔預覽服務地址
        var xurl = "https://view.xdocin.com/view?src=";
        //傳入文檔地址
        xurl += encodeURIComponent(file);
        //預覽參數(shù)
        var ops = {
          "watermark": this.watermark,
          // "pdf": true, //word文檔嘗試以pdf方式顯示，默認false
          // "saveable": true, //是否允許保存源文件，默認false
          // "printable": false, //是否允許打印，默認true
          // "copyable": false, //是否允許選擇復制內(nèi)容，默認true
          // "toolbar": false, //是否顯示底部工具條，默認true
          // "expire": 30, //預覽鏈接有效期，單位分鐘，默認永久有效
          // "limit": "1,3", //限制頁數(shù)，如：“5”表示只顯示前5頁，“2,5”表示從第2頁開始的5頁，對pdf/doc/docx/ppt/pptx有效
          // "mtime": 1633093801, //文件修改時間戳（精確到秒）或修改時間（如：2021-10-01 21:10:01），值改變刷新緩存，實時預覽
        };
        //傳入預覽參數(shù)
        for (var a in ops) {
          if (ops[a] != undefined) {
            xurl += "&" + a + "=" + encodeURIComponent(ops[a]);
          }
        }
        //開始預覽
        this.xsrc = xurl;
      }
    }
  },
  template: '<iframe :src="xsrc" frameborder="0" scrolling="auto" style="width:100%;height:100%;"></iframe>'
}