vue 移动端word、excel、pdf预览本地测试案例

第一步

新建一个vue项目。打开控制命令行程序（CMD），运行命令： vue init webpack “项目名称”。

第二步

安装依赖，在控制命令行程序（CMD），运行命令：npm install 或者 cnpm install.

实现预览

这里先以word为例。首先运行命令：npm install mammoth，这是预览word的一个插件，必须要安装；在static文件夹下放一个.docx为后缀的word文件：

然后在页面引入即可：

<template>
  <div class="excel-container">
    <div ref="docPreview"></div>
  </div>
</template>

<script>
import mammoth from 'mammoth'
import AlloyFinger from "../../static/js/alloyfinger.js";
import Transform from "../../static/js/transform.js";
export default {
  data () {
    return {
      url: '../../static/file/TMS.docx',			//这里使用相对路径
      card: [],
      cardActive: '',
      workbook: {},
      data: [],
    }
  },
  mounted () {
    this.previewFile();

    this.getData();
  },
  methods: {
    previewFile() {
      let _this=this;
      try {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", this.url);
        xhr.responseType = "arraybuffer";
        console.log(xhr)
        xhr.onload = function(e) {
          var arrayBuffer = xhr.response; //arrayBuffer
 
          mammoth
            .convertToHtml({ arrayBuffer: arrayBuffer })
            .then(displayResult)
            .done();
 
          function displayResult(result) {
            console.log(result);
            _this.$refs.docPreview.innerHTML = result.value || "";
          }
        };
        xhr.send();
      } catch (e) {
        console.log(e);
        _this.$emit("errorPreview");
      }
    },
    getData() {
        let that = this;
        let element = that.$refs.docPreview;
        Transform(element);
        var initScale = 1;
        this.af = new AlloyFinger(element, {
          // rotate: function (evt) {  //实现旋转
          //   element.rotateZ += evt.angle;
          // },
          multipointStart: function () {
              initScale = element.scaleX;
          },
          pinch: function (evt) {   //实现缩放
            element.scaleX = element.scaleY = initScale * evt.zoom;
          },
          pressMove: function (evt) {   //实现移动
            element.translateX += evt.deltaX;
            element.translateY += evt.deltaY;
            evt.preventDefault();
          },
        });
      },
  }
}
</script>

<style>
.excel-container {
  width: 100%;
}
</style>

其中引入的三个.js 文件是实现手势缩放、旋转、移动的方法，也可以不引入；
然后修改一下config文件夹下的index.js文件，将host改为0.0.0.0，只要手机和电脑在同一个域名ip下，就可以用手访问项目查看预览效果（ip地址:端口号）

excel、pdf预览都是一样，只是引入的插件不一样
excel预览运行命令：npm install xlsx，页面引入import XLSX from ‘xlsx’
pdf预览运行命令：npm install --save vue-pdf，页面引入import pdf from ‘vue-pdf’

gitee测试源码: https://gitee.com/fang_zheng_wei/mobile-preview