feat: 增加微软提供的office文件在线访问接口支持

Author: abu3389

README.md

@@ -2,34 +2,12 @@
 
 ❤️ ❤️ ❤️ 开源不易，请各位大佬给个 Start✨✨✨，同时欢迎提 PR 和 Issure！:smile:
 
-#### [在线示例文档](https://home.sharecorner.top/file-viewer-doc/index.html)
+#### 介绍：
 
 该组件集成了市面上纯前端渲染多种常用文档格式的主流方案，如 pptx,docx,xlsx,pdf,mp4,纯文本和图片。
 
 后期计划增加更多文件格式的在线浏览支持。
 
-##### 这里 特别鸣谢 [小爬的老粉丝](https://blog.csdn.net/wybaby168)分享的文章、源码内核和思路，在此基础上进行了封包和优化
+##### [☞☞☞ 项目 api 文档和演示戳这里](https://home.sharecorner.top/file-viewer-doc/index.html)
 
-### 安装
-
-```
-yarn install
-```
-
-### 启动本地演示调试
-
-```
-yarn run serve
-```
-
-### 打包成 npm 组件
-
-```
-yarn run build
-```
-
-### 打包项目提供 iframe 入口使用
-
-```
-yarn run build:iframe
-```
+##### 这里 特别鸣谢 [小爬的老粉丝](https://blog.csdn.net/wybaby168) 分享的文章、源码内核和思路，在此基础上进行了封包和优化

doc/App.vue

@@ -84,7 +84,6 @@ header {
 section {
   .section-content {
     margin: 0;
-    padding-bottom: 10px;
     box-sizing: border-box;
   }
 

doc/views/Start.vue

@@ -2,17 +2,49 @@
  * @Author: zhanghan
  * @Date: 2023-01-10 14:28:29
  * @LastEditors: zhanghan
- * @LastEditTime: 2023-01-12 14:49:53
+ * @LastEditTime: 2023-01-13 14:02:18
  * @Descripttion: 快速上手
 -->
 <template>
   <div class="page-home page">
+    <h3>属性(组件和iframe传参都支持)：</h3>
+    <ul>
+      <li>fileUrl: string 上传的地址（必传）</li>
+      <li>
+        useOfficeMicroOnline: boolean
+        是否开启使用微软提供的office文件在线访问接口（内网无效，可选，默认false关闭）
+      </li>
+    </ul>
+    <h3>注意事项：</h3>
+    <h4>* 被浏览的文件链接必须同源或本身支持跨域才能访问和下载文件。</h4>
+    <h4>
+      *
+      若发布生产的项目不在服务器域名根目录，记得配置打包的前缀路径，打包后资源才能被正常引用。（以vue-cli为例，配置
+      <code>vue.config.js</code>
+      的
+      <code>publicPath: './'</code>
+      ； 其他框架请自行选择合适的配置文件进行配置）
+    </h4>
+    <h4>
+      *
+      由于office系列格式的文件解析微软不开源，无法保证百分百还原文档效果，若实际需求没有严格要求百分百还原一致，您可以使用纯前端渲染office文件的这种方式，否则建议通过后端统一转为PDF或者图片格式进行浏览，PDF和图片格式的文件浏览效果最佳，内核渲染方案也较为成熟。
+    </h4>
+    <h4>
+      * 或者您也可以通过iframe或者组件形式传递
+      <code>useOfficeMicroOnline = true</code>
+      这个属性开启office系列文件使用内置的微软文档在线访问接口，浏览效果会比纯前端渲染好。
+    </h4>
     <h2>iframe方式示例（推荐）：</h2>
     <h3>使用说明：</h3>
     <h4>
-      推荐独立部署
-      {{ config.name }}
-      的编译构建产物，并使用iframe方式引入以减少引入构建代价，提升构建效率。
+      推荐独立部署本项目的编译编译构建产物
+      <a
+        href="https://github.com/zyl-ui/vue-file-viewer/tree/master/public/file-viewer"
+        target="_blank"
+      >
+        file-viewer
+      </a>
+      ，并使用iframe方式引入以减少引入构建代价，提升构建效率。
     </h4>
     <h4>此种方式支持跨框架使用。</h4>
     <h3>使用步骤：</h3>
@@ -25,28 +57,12 @@
         file-viewer
       </a>
       。
-      <br />
-    </h4>
-    <h4>
-      2、将下载后的file-viewer文件夹整个放在项目公共文件夹中作为外部公共资源使用。
-      <br />
-      （以vue-cli为例，放置在项目public文件夹下；其他框架自行选择合适的公共路径放置）
     </h4>
-    <h3>注意事项：</h3>
-    <h4>* 本项目示例链接随时失效，请勿直接用于生产环境。</h4>
-    <h4>* 被浏览的文件链接必须同源或本身支持跨域才能访问和下载文件。</h4>
     <h4>
-      *
-      若发布生产的项目不在服务器域名根目录，记得配置打包的前缀路径，打包后资源才能被正常引用。（以vue-cli为例，配置
-      <code>vue.config.js</code>
-      的
-      <code>publicPath: './'</code>
-      ； 其他框架请自行选择合适的配置文件进行配置）
+      2、将下载后的 file-viewer
+      文件夹整个放在项目公共文件夹中作为外部公共资源使用。 （以 vue-cli
+      为例，放置在项目 public 文件夹下；其他框架自行选择合适的公共路径放置）
     </h4>
-    <h4>
-      由于office系列格式的文件解析微软不开源，无法保证百分百还原文档效果，若实际需求没有严格要求百分百还原一致，您可以使用纯前端渲染office文件的这种方式，否则建议通过后端统一转为PDF或者图片格式进行浏览，PDF和图片格式的文件浏览效果最佳，内核渲染方案也较为成熟。
-    </h4>
-    <br />
 
     <h3>一般url传入使用</h3>
     <section class="demo">
@@ -66,7 +82,36 @@
       </Collapse>
     </section>
 
-    <h3>支持二进制文件流消息推送</h3>
+    <h3>
+      可通过
+      <code>useOfficeMicroOnline = true</code>
+      开启微软文档在线访问接口，该接口兼容不带后缀x的低版本文档，如：doc或者docx；
+      开启后属于office的文件会通过微软提供的api接口进行访问
+      <code>http://view.officeapps.live.com/op/view.aspx?src=文件地址</code>
+      （隐私文件不推荐开启，该选项内网无联网时不可用）
+    </h3>
+    <section class="demo">
+      <div class="section-content">
+        <iframe
+          src="./file-viewer/index.html?useOfficeMicroOnline=true&fileUrl=https://home.sharecorner.top/fileTest/doc.doc"
+          scrolling="auto"
+          style="border:0;height: 500px;width:100%"
+        />
+      </div>
+    </section>
+    <section class="snippets">
+      <Collapse>
+        <div class="section-content">
+          <CodeSnippet
+            class="snippet"
+            :code="useOfficeMicroOnlineSnippet"
+            lang="html"
+          />
+        </div>
+      </Collapse>
+    </section>
+
+    <h3>支持接收二进制文件流消息推送</h3>
     <h3>注意事项：</h3>
     <h4>
       *
@@ -94,11 +139,17 @@
 
     <h2>组件方式示例：</h2>
     <h3>安装：</h3>
-    <CodeSnippet class="snippet" :code="installSnippet" lang="js" />
+    <CodeSnippet class="snippet" :code="installSnippet1" lang="js" />
+    <CodeSnippet class="snippet" :code="installSnippet2" lang="js" />
+    <div>或者页面内单独引入：</div>
+    <CodeSnippet class="snippet" :code="installSnippet3" lang="js" />
     <h3>使用：</h3>
     <section class="demo">
       <div class="section-content">
-        <vue-file-viewer :file="file" style="height: 500px;overflow: auto;" />
+        <vue-file-viewer
+          :fileUrl="file"
+          style="height: 500px;overflow: auto;"
+        />
       </div>
     </section>
     <section class="snippets">
@@ -127,6 +178,14 @@ const iframeSnippet = `
 />
 `
 
+const useOfficeMicroOnlineSnippet = `
+<iframe
+  src="./file-viewer/index.html?useOfficeMicroOnline=true&fileUrl=https://home.sharecorner.top/fileTest/doc.doc"
+  scrolling="auto"
+  style="border:0;height: 500px;width:100%"
+/>
+`
+
 const blobIframeSnippet1 = `
 <div id="blobIframe" style="height: 500px"></div>
 `
@@ -202,19 +261,31 @@ export default {
   }
 `
 
-const installSnippet = `
+const installSnippet1 = `npm install --save '${config.name}'`
+
+const installSnippet2 = `
 import Vue from 'vue'
 import App from './App.vue'
-import vueFileViewer from '${config.name}'
+import VueFileViewer from '${config.name}'
 
-Vue.use(vueFileViewer)
+Vue.use(VueFileViewer)
 
 new Vue({
   el: '#app',
   render: h => h(App)
 });
 `
 
+const installSnippet3 = `
+import { VueFileViewer } from '${config.name}'
+
+export default {
+  components: {
+    VueFileViewer
+  }
+}
+`
+
 const componentSnippet2 = `
 data () {
   return {
@@ -224,7 +295,7 @@ data () {
 `
 
 const componentSnippet1 = `
-<vue-file-viewer :file="file" style="height: 500px;overflow: auto;" />
+<vue-file-viewer :fileUrl="file"  style="height: 500px;overflow: auto;" />
 `
 export default {
   name: 'Home',
@@ -237,9 +308,12 @@ export default {
     return {
       config,
       iframeSnippet,
+      useOfficeMicroOnlineSnippet,
       blobIframeSnippet1,
       blobIframeSnippet2,
-      installSnippet,
+      installSnippet1,
+      installSnippet2,
+      installSnippet3,
       componentSnippet2,
       componentSnippet1,
       file: 'https://home.sharecorner.top/fileTest/word.docx',

docs/file-viewer/index.html

@@ -5,4 +5,4 @@
       margin: 0;
       width: 100%;
       height: 100%;
-    }</style><link href="static/css/chunk-vendors.14348074.css" rel="preload" as="style"><link href="static/css/index.c60bbbd9.css" rel="preload" as="style"><link href="static/js/chunk-vendors.101c5e96.js" rel="preload" as="script"><link href="static/js/index.b742b920.js" rel="preload" as="script"><link href="static/css/chunk-vendors.14348074.css" rel="stylesheet"><link href="static/css/index.c60bbbd9.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but @zuiyouliao/vue-file-viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="static/js/chunk-vendors.101c5e96.js"></script><script src="static/js/index.b742b920.js"></script></body></html>
+    }</style><link href="static/css/chunk-vendors.14348074.css" rel="preload" as="style"><link href="static/css/index.afdd19c2.css" rel="preload" as="style"><link href="static/js/chunk-vendors.101c5e96.js" rel="preload" as="script"><link href="static/js/index.de133c4c.js" rel="preload" as="script"><link href="static/css/chunk-vendors.14348074.css" rel="stylesheet"><link href="static/css/index.afdd19c2.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but @zuiyouliao/vue-file-viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="static/js/chunk-vendors.101c5e96.js"></script><script src="static/js/index.de133c4c.js"></script></body></html>

docs/file-viewer/static/css/index.c60bbbd9.css renamed to docs/file-viewer/static/css/index.afdd19c2.css

@@ -5,4 +5,4 @@
       margin: 0;
       width: 100%;
       height: 100%;
-    }</style><link href="static/css/chunk-vendors.690dbe2c.css" rel="preload" as="style"><link href="static/css/index.0c036bce.css" rel="preload" as="style"><link href="static/js/chunk-vendors.e1710af5.js" rel="preload" as="script"><link href="static/js/index.92e28a18.js" rel="preload" as="script"><link href="static/css/chunk-vendors.690dbe2c.css" rel="stylesheet"><link href="static/css/index.0c036bce.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but @zuiyouliao/vue-file-viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="static/js/chunk-vendors.e1710af5.js"></script><script src="static/js/index.92e28a18.js"></script></body></html>
+    }</style><link href="static/css/chunk-vendors.690dbe2c.css" rel="preload" as="style"><link href="static/css/index.3487c7c1.css" rel="preload" as="style"><link href="static/js/chunk-vendors.e1710af5.js" rel="preload" as="script"><link href="static/js/index.263cc237.js" rel="preload" as="script"><link href="static/css/chunk-vendors.690dbe2c.css" rel="stylesheet"><link href="static/css/index.3487c7c1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but @zuiyouliao/vue-file-viewer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="static/js/chunk-vendors.e1710af5.js"></script><script src="static/js/index.263cc237.js"></script></body></html>