add: 项目框架搭建、增加docx文档的预览

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,34 @@
+# vue-office
+
+## 功能介绍
+- 一站式：提供docx(已支持)、pdf、ppt、excel多种文档的在线预览方案，不必再去四处寻找/集成多种方案
+- 简单：只需提供文档的src(网络地址)即可完成文档预览，也支持通过文件的arrayBuffer进行预览
+- 体验好：选择每个文档的最佳预览方案，保证用户体验和性能最优
+
+## 安装
+```
+npm install vue-office
+```
+
+### docx文档预览
+```vue
+<template>
+  <vue-office-docx :src="docx"/>
+</template>
+
+<script>
+//引入VueOfficeDocx组件
+import VueOfficeDocx from 'vue-office/lib/docx'
+
+export default {
+  components:{
+    VueOfficeDocx
+  },
+  data(){
+    return {
+      docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址
+    }
+  }
+}
+</script>
+```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

build/bin/generatePackageEntry.js

@@ -0,0 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+
+const docxPath = path.resolve(__dirname, '../../lib/docx');
+
+fs.copyFileSync(path.resolve(docxPath, 'vue-office-docx.common.js'), path.resolve(docxPath, 'index.js'));

examples/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="app">
+    <vue-office-docx src="http://static.shanhuxueyuan.com/test6.docx"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  components: {
+
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

examples/components/HelloWorld.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

examples/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App.vue'
+import VueOffice from '../packages'
+
+Vue.config.productionTip = false
+Vue.use(VueOffice)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

lib/demo.html

@@ -0,0 +1 @@
+<!doctype html><meta charset="utf-8"><title>vue-office demo</title><script src="./vue-office.umd.js"></script><link rel="stylesheet" href="./vue-office.css"><script>console.log(vue-office)</script>

lib/docx/demo.html

@@ -0,0 +1 @@
+<!doctype html><meta charset="utf-8"><title>vue-office-docx demo</title><script src="./vue-office-docx.umd.js"></script><link rel="stylesheet" href="./vue-office-docx.css"><script>console.log(vue-office-docx)</script>

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "vue-office",
+  "version": "0.1.0",
+  "description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel的预览",
+  "main": "lib/vue-office.common.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lib:all":  "vue-cli-service build --target lib --name vue-office --dest lib packages/index.js",
+    "lib:docx":  "vue-cli-service build  --no-clean --target lib --name vue-office-docx --dest lib/docx packages/docx/index.js",
+    "lib:generateEntry": "node build/bin/generatePackageEntry.js",
+    "lib": "npm run lib:all && npm run lib:docx && npm run lib:generateEntry"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:501351981/vue-office.git"
+  },
+  "keywords": [
+    "vue",
+    "docx",
+    "pdf",
+    "ppt",
+    "excel"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "lodash": "^4.17.21",
+    "mammoth": "^1.5.1",
+    "path": "^0.12.7",
+    "stream-browserify": "^3.0.0",
+    "util": "^0.12.5",
+    "vue": "^2.6.14"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  }
+}

packages/docx/index.js

@@ -0,0 +1,7 @@
+import VueOfficeDocx from './src/main'
+
+VueOfficeDocx.install = function (Vue) {
+    Vue.component(VueOfficeDocx.name, VueOfficeDocx)
+}
+
+export default VueOfficeDocx

packages/docx/src/docx.js

@@ -0,0 +1,31 @@
+const mammoth = require('./lib/mammoth.browser')
+
+function getHtmlFromDocx(src) {
+    // eslint-disable-next-line
+    return new Promise((async (resolve, reject) => {
+        try{
+            let arrayBuffer
+            if (typeof src === 'string') {
+                arrayBuffer = await fetchDocx(src)
+            }else if (src instanceof ArrayBuffer){
+                arrayBuffer = src
+            }
+            mammoth.convertToHtml({arrayBuffer})
+                .then(function (result) {
+                    resolve(result.value)
+                });
+        }catch(e){
+            reject(e)
+        }
+    }))
+}
+
+function fetchDocx(src) {
+    return fetch(src).then(res => {
+        return res.arrayBuffer()
+    })
+}
+
+export default {
+    getHtmlFromDocx
+}

packages/docx/src/main.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="vue-office-docx" ref="vue-office-docx"></div>
+</template>
+
+<script>
+import docx from './docx'
+
+export default {
+  name: "VueOfficeDocx",
+  props: {
+    src: [String, ArrayBuffer]
+  },
+  data() {
+    return {
+      htmlData: ''
+    }
+  },
+  watch: {
+    src: {
+      handler(val) {
+        if (!val) {
+          this.htmlData = ''
+          this.insertHtml()
+          return
+        }
+        docx.getHtmlFromDocx(val).then(html => {
+          this.htmlData = html
+          this.insertHtml()
+        }).catch(e => {
+          this.htmlData = ''
+          this.insertHtml()
+          throw new Error('vue-office-docx：\n' + JSON.stringify(e))
+        })
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    insertHtml() {
+      this.$refs["vue-office-docx"].innerHTML = this.htmlData
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

packages/index.js

@@ -0,0 +1,19 @@
+import VueOfficeDocxCom from './docx'
+
+const components = [
+    VueOfficeDocxCom
+]
+
+const install = function (Vue) {
+    components.map(component => Vue.component(component.name, component))
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue)
+}
+
+export const VueOfficeDocx = VueOfficeDocxCom;
+export default {
+    install,
+    VueOfficeDocx: VueOfficeDocxCom
+}

public/index.html

@@ -0,0 +1,17 @@
+<!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>
+  </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>

vue.config.js

@@ -0,0 +1,24 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
+  pages: {
+    index: {
+      entry: 'examples/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    }
+  },
+  // 扩展 webpack 配置，使 packages 加入编译
+  chainWebpack: config => {
+    config.module
+        .rule('js')
+        .include
+        .add('/packages')
+        .end()
+        .use('babel')
+        .loader('babel-loader')
+  },
+  configureWebpack: {
+  }
+
+})