diff --git a/examples/docs/404.html b/examples/docs/404.html index 5da2a66..2046e3a 100644 --- a/examples/docs/404.html +++ b/examples/docs/404.html @@ -12,7 +12,7 @@
Skip to content

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
- diff --git a/examples/docs/assets/config_index.md.a8895489.js b/examples/docs/assets/config_index.md.4b837d8d.js similarity index 97% rename from examples/docs/assets/config_index.md.a8895489.js rename to examples/docs/assets/config_index.md.4b837d8d.js index a9522cc..8c248df 100644 --- a/examples/docs/assets/config_index.md.a8895489.js +++ b/examples/docs/assets/config_index.md.4b837d8d.js @@ -1,4 +1,4 @@ -import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const C=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l(`

属性

src

文档地址,文件在CDN或服务器上的地址,或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。

request-options

如果属性src是个文件地址,组件内部会通过window.fetch进行请求,对应window.fetch的请求参数,可以用来设置header等请求信息。

options

预览需要的一些特殊配置,不同预览组件可配置项各不相同。

excel相关的配置,目前支持配置项很少。

minColLength: excel最少渲染多少列,如果想实现xlsx文件内容有几列,就渲染几列,可以将此值设置为0.

widthOffset:在默认渲染的列表宽度上再加10px宽

heightOffset://在默认渲染的列表高度上再加10px高

javascript
{
+import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const C=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l(`

属性

src

  • 类型:String, ArrayBuffer, Blob

文档地址,文件在CDN或服务器上的地址,或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。

request-options

  • 类型:Object

如果属性src是个文件地址,组件内部会通过window.fetch进行请求,对应window.fetch的请求参数,可以用来设置header等请求信息。

options

  • 类型: Object

预览需要的一些特殊配置,不同预览组件可配置项各不相同。

  • excel预览

excel相关的配置,目前支持配置项很少。

minColLength: excel最少渲染多少列,如果想实现xlsx文件内容有几列,就渲染几列,可以将此值设置为0.

widthOffset:在默认渲染的列表宽度上再加10px宽

heightOffset:在默认渲染的列表高度上再加10px高

javascript
{
   "minColLength": 20,
   "widthOffset": 0, //在默认渲染的列表宽度上再加10px宽
   "heightOffset": 0, //在默认渲染的列表高度上再加10px高
diff --git a/examples/docs/assets/config_index.md.a8895489.lean.js b/examples/docs/assets/config_index.md.4b837d8d.lean.js
similarity index 100%
rename from examples/docs/assets/config_index.md.a8895489.lean.js
rename to examples/docs/assets/config_index.md.4b837d8d.lean.js
diff --git a/examples/docs/assets/guide_faq.md.c0a76c24.js b/examples/docs/assets/guide_faq.md.fc7d1e4f.js
similarity index 98%
rename from examples/docs/assets/guide_faq.md.c0a76c24.js
rename to examples/docs/assets/guide_faq.md.fc7d1e4f.js
index 7e9c80c..7a6689d 100644
--- a/examples/docs/assets/guide_faq.md.c0a76c24.js
+++ b/examples/docs/assets/guide_faq.md.fc7d1e4f.js
@@ -18,9 +18,9 @@ import{_ as A,c as E,o as I,O as C}from"./chunks/framework.935eb42c.js";const k=
 }));
 
 
-app.listen(3000);

各种语言都类似,可以自行百度查询

文件预览不出来

  • 检查文件是否返回成功,是否存在跨域
  • 目前不支持doc、xls格式文件的预览
  • 可以看看@error事件,抛出了什么错误信息

ue.defineComponent is not a function

出现这个问题一般是通过CDN的方式加载了vue.js文件,且CDN中的vue版本和开发环境安装的vue版本不一致。

  • 问题确认

检查CDN中vue.js的版本 和 node_modules下的vue版本是否一致,注意:是node_modules下的真实安装的vue版本,而不是package.json中的vue版本。

  • 出现原因

package.json中vue版本不是指定的固定版本,而是在版本前面带"^"或"~"符号,这里的含义是使用符合条件的新版本,而不是看到的这个版本。

json
{
+app.listen(3000);

各种语言都类似,可以自行百度查询

文件预览不出来

  • 检查文件是否返回成功,是否存在跨域
  • 目前不支持doc、xls格式文件的预览
  • 可以看看@error事件,抛出了什么错误信息

**.defineComponent is not a function

出现这个问题一般是通过CDN的方式加载了vue.js文件,且CDN中的vue版本和开发环境安装的vue版本不一致。

  • 问题确认

检查CDN中vue.js的版本 和 node_modules下的vue版本是否一致。

首先在项目的html中查看引入的vue.js文件路径,然后根据路径找的这个vue.js文件,查看其版本;

然后查看node_modules中安装的vue版本,注意:是在node_modules目录下找到vue安装文件,然后查看其版本,而不是package.json中的vue版本。

看看两个地方的vue版本是不是不一致,不一致往下看。

  • 出现原因

package.json中vue版本不是指定的固定版本,而是在版本前面带"^"或"~"符号,这里的含义是使用符合条件的新版本,而不是看到的这个版本。

json
{
   "vue": "^2.6.10"
-}
  • 解决方法

修改package.json中 vue 和 vue-template-compiler的版本,将前的"^"或"~"符号去掉,具体版本号和CDN中的vue版本保持一致。

json
{
+}
  • 解决方法

修改package.json中 vue 和 vue-template-compiler的版本,将版本前面的"^"或"~"符号去掉,具体版本号和CDN中的vue版本保持一致。

json
{
   "vue": "2.6.10",
   "vue-template-compiler": "2.6.10"
-}

删除 package-lock.json 文件 和 node_modules中的全部包。

重新安装所有依赖,然后运行查看效果。

`,32),Q=[i];function B(e,n,l,g,a,t){return I(),E("div",null,Q)}const r=A(s,[["render",B]]);export{k as __pageData,r as default}; +}

删除 package-lock.json 文件 和 node_modules中的全部包。

重新安装所有依赖,然后运行查看效果。

`,35),Q=[i];function B(e,n,l,g,a,t){return I(),E("div",null,Q)}const r=A(s,[["render",B]]);export{k as __pageData,r as default}; diff --git a/examples/docs/assets/guide_faq.md.c0a76c24.lean.js b/examples/docs/assets/guide_faq.md.fc7d1e4f.lean.js similarity index 81% rename from examples/docs/assets/guide_faq.md.c0a76c24.lean.js rename to examples/docs/assets/guide_faq.md.fc7d1e4f.lean.js index 323909d..8dc2514 100644 --- a/examples/docs/assets/guide_faq.md.c0a76c24.lean.js +++ b/examples/docs/assets/guide_faq.md.fc7d1e4f.lean.js @@ -1 +1 @@ -import{_ as A,c as E,o as I,O as C}from"./chunks/framework.935eb42c.js";const k=JSON.parse('{"title":"常见问题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/faq.md"}'),s={name:"guide/faq.md"},i=C("",32),Q=[i];function B(e,n,l,g,a,t){return I(),E("div",null,Q)}const r=A(s,[["render",B]]);export{k as __pageData,r as default}; +import{_ as A,c as E,o as I,O as C}from"./chunks/framework.935eb42c.js";const k=JSON.parse('{"title":"常见问题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/faq.md"}'),s={name:"guide/faq.md"},i=C("",35),Q=[i];function B(e,n,l,g,a,t){return I(),E("div",null,Q)}const r=A(s,[["render",B]]);export{k as __pageData,r as default}; diff --git a/examples/docs/config/event.html b/examples/docs/config/event.html index 916bbff..8dfaa3d 100644 --- a/examples/docs/config/event.html +++ b/examples/docs/config/event.html @@ -15,7 +15,7 @@
Skip to content
跳转到

事件

rendered

渲染完成事件,可以在该事件中处理关闭loading操作等。

首次渲染完成及每次src变化之后渲染完成都会触发该事件。

error

失败事件,各种失败都会触发该事件,包括网络请求失败,渲染失败等

- diff --git a/examples/docs/config/index.html b/examples/docs/config/index.html index 99ed729..93c4bf7 100644 --- a/examples/docs/config/index.html +++ b/examples/docs/config/index.html @@ -10,11 +10,11 @@ - + -
Skip to content
跳转到

属性

src

  • 类型:String, ArrayBuffer, Blob

文档地址,文件在CDN或服务器上的地址,或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。

request-options

  • 类型:Object

如果属性src是个文件地址,组件内部会通过window.fetch进行请求,对应window.fetch的请求参数,可以用来设置header等请求信息。

options

  • 类型: Object

预览需要的一些特殊配置,不同预览组件可配置项各不相同。

  • excel预览

excel相关的配置,目前支持配置项很少。

minColLength: excel最少渲染多少列,如果想实现xlsx文件内容有几列,就渲染几列,可以将此值设置为0.

widthOffset:在默认渲染的列表宽度上再加10px宽

heightOffset://在默认渲染的列表高度上再加10px高

javascript
{
+    
Skip to content
跳转到

属性

src

  • 类型:String, ArrayBuffer, Blob

文档地址,文件在CDN或服务器上的地址,或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。

request-options

  • 类型:Object

如果属性src是个文件地址,组件内部会通过window.fetch进行请求,对应window.fetch的请求参数,可以用来设置header等请求信息。

options

  • 类型: Object

预览需要的一些特殊配置,不同预览组件可配置项各不相同。

  • excel预览

excel相关的配置,目前支持配置项很少。

minColLength: excel最少渲染多少列,如果想实现xlsx文件内容有几列,就渲染几列,可以将此值设置为0.

widthOffset:在默认渲染的列表宽度上再加10px宽

heightOffset:在默认渲染的列表高度上再加10px高

javascript
{
   "minColLength": 20,
   "widthOffset": 0, //在默认渲染的列表宽度上再加10px宽
   "heightOffset": 0, //在默认渲染的列表高度上再加10px高
@@ -38,7 +38,7 @@
     password: '', //string, 加密pdf的密码
     //更多配置参见 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html
 }

staticFileUrl [pdf特有属性]

  • 类型: String

pdf渲染时可能会请求一些bcmap文件,这些文件默认从 https://unpkg.com/pdfjs-dist@3.1.81/ 加载,但是可能存在网络不通问题,如果遇到这种问题,可以将这些文件放到自己静态目录,然后修改该属性,告诉组件去这里请求bcmap文件。

涉及的文件存放在当前github项目中examples/public/cmaps目录下,可将cmaps目录复制到你的静态服务目录下,然后修改staticFileUrl为cmaps文件夹对应的父地址,必须已http或https开头,如 http://yourdomain/static/

- diff --git a/examples/docs/guide/contact.html b/examples/docs/guide/contact.html index b1c14f8..ecac407 100644 --- a/examples/docs/guide/contact.html +++ b/examples/docs/guide/contact.html @@ -15,7 +15,7 @@
Skip to content
跳转到

联系我

提Issue

如果您遇到了问题,欢迎提Issue,同时请您尽可能详细的描述您遇到的问题,包括不限于

  • 您使用的是哪个库: @vue-office/docx、@vue-office/excel、@vue-office/pdf
  • 您使用的环境:APP or Web,PC or 移动端,如果是浏览器兼容问题,请提供您的浏览器版本
  • 如果有错误,请粘贴详细的报错信息

详细的描述有助于我尽快定位问题,因为平时工作很忙,时间很有限,感谢理解

赞助和微信交流

如果该项目确实帮助到了您,欢迎赞助,以鼓励我将更多的休息时间,投入到该项目的优化中,也欢迎赞助后添加微信交流:_hit757_

赞助二维码

跪求一赞

如果您觉得该项目帮助了您,还请伸出贵手帮忙点赞支持,万分感谢~~

- diff --git a/examples/docs/guide/faq.html b/examples/docs/guide/faq.html index 4d3427c..1a6a768 100644 --- a/examples/docs/guide/faq.html +++ b/examples/docs/guide/faq.html @@ -10,7 +10,7 @@ - + @@ -34,13 +34,13 @@ })); -app.listen(3000);

各种语言都类似,可以自行百度查询

文件预览不出来

  • 检查文件是否返回成功,是否存在跨域
  • 目前不支持doc、xls格式文件的预览
  • 可以看看@error事件,抛出了什么错误信息

ue.defineComponent is not a function

出现这个问题一般是通过CDN的方式加载了vue.js文件,且CDN中的vue版本和开发环境安装的vue版本不一致。

  • 问题确认

检查CDN中vue.js的版本 和 node_modules下的vue版本是否一致,注意:是node_modules下的真实安装的vue版本,而不是package.json中的vue版本。

  • 出现原因

package.json中vue版本不是指定的固定版本,而是在版本前面带"^"或"~"符号,这里的含义是使用符合条件的新版本,而不是看到的这个版本。

json
{
+app.listen(3000);

各种语言都类似,可以自行百度查询

文件预览不出来

  • 检查文件是否返回成功,是否存在跨域
  • 目前不支持doc、xls格式文件的预览
  • 可以看看@error事件,抛出了什么错误信息

**.defineComponent is not a function

出现这个问题一般是通过CDN的方式加载了vue.js文件,且CDN中的vue版本和开发环境安装的vue版本不一致。

  • 问题确认

检查CDN中vue.js的版本 和 node_modules下的vue版本是否一致。

首先在项目的html中查看引入的vue.js文件路径,然后根据路径找的这个vue.js文件,查看其版本;

然后查看node_modules中安装的vue版本,注意:是在node_modules目录下找到vue安装文件,然后查看其版本,而不是package.json中的vue版本。

看看两个地方的vue版本是不是不一致,不一致往下看。

  • 出现原因

package.json中vue版本不是指定的固定版本,而是在版本前面带"^"或"~"符号,这里的含义是使用符合条件的新版本,而不是看到的这个版本。

json
{
   "vue": "^2.6.10"
-}
  • 解决方法

修改package.json中 vue 和 vue-template-compiler的版本,将前的"^"或"~"符号去掉,具体版本号和CDN中的vue版本保持一致。

json
{
+}
  • 解决方法

修改package.json中 vue 和 vue-template-compiler的版本,将版本前面的"^"或"~"符号去掉,具体版本号和CDN中的vue版本保持一致。

json
{
   "vue": "2.6.10",
   "vue-template-compiler": "2.6.10"
 }

删除 package-lock.json 文件 和 node_modules中的全部包。

重新安装所有依赖,然后运行查看效果。

- diff --git a/examples/docs/guide/index.html b/examples/docs/guide/index.html index 783774e..f10d1b8 100644 --- a/examples/docs/guide/index.html +++ b/examples/docs/guide/index.html @@ -128,7 +128,7 @@ } } </script> - diff --git a/examples/docs/guide/js-preview.html b/examples/docs/guide/js-preview.html index 3c3e010..cdc68d7 100644 --- a/examples/docs/guide/js-preview.html +++ b/examples/docs/guide/js-preview.html @@ -78,7 +78,7 @@ CMapReaderFactory?: Object; useSystemFonts?: boolean; }

preview方法

调用preview方法进行文件的预览。

preview方法接收参数支持三种: 文件url地址、文件ArrayBuffer格式数据、文件blob格式。

ts
preview: (src: string | ArrayBuffer | Blob) => Promise<any>

url格式适合有文件静态地址的情况,ArrayBuffer格式适合文件上传前的预览。

download方法

调用download进行文件下载,参数名为下载的文件名称,可不传。

ts
download: (fileName?: string) => void;

destroy方法

卸载方法,可以在组件销毁前调用预览对象的卸载方法,避免长期使用造成内存泄露。

如果该项目帮助了您,还请您不吝点赞

- diff --git a/examples/docs/guide/preview-docx.html b/examples/docs/guide/preview-docx.html index 63bd0d9..c1144fe 100644 --- a/examples/docs/guide/preview-docx.html +++ b/examples/docs/guide/preview-docx.html @@ -121,7 +121,7 @@ } } </script> - diff --git a/examples/docs/guide/preview-pdf.html b/examples/docs/guide/preview-pdf.html index 31a5b4f..c22c017 100644 --- a/examples/docs/guide/preview-pdf.html +++ b/examples/docs/guide/preview-pdf.html @@ -45,7 +45,7 @@ } } </script>

上传文件预览

和docx的上传文件预览一样,获取文件的ArrayBuffer,传给组件的src属性。

- diff --git a/examples/docs/guide/preview-xlsx.html b/examples/docs/guide/preview-xlsx.html index f9f3b5c..6dcb754 100644 --- a/examples/docs/guide/preview-xlsx.html +++ b/examples/docs/guide/preview-xlsx.html @@ -48,7 +48,7 @@ } } </script>

上传文件预览

和docx的上传文件预览一样,获取文件的ArrayBuffer,传给组件的src属性。

- diff --git a/examples/docs/hashmap.json b/examples/docs/hashmap.json index 45b0261..329a981 100644 --- a/examples/docs/hashmap.json +++ b/examples/docs/hashmap.json @@ -1 +1 @@ -{"guide_contact.md":"10c84e73","config_event.md":"cbedfdd0","config_index.md":"a8895489","guide_preview-xlsx.md":"0de0ac4e","guide_preview-pdf.md":"9bd426ea","index.md":"2dfe7e9d","guide_js-preview.md":"873b3161","guide_index.md":"59f780b1","guide_preview-docx.md":"747caaea","guide_faq.md":"c0a76c24"} +{"guide_preview-pdf.md":"9bd426ea","guide_preview-docx.md":"747caaea","index.md":"2dfe7e9d","guide_preview-xlsx.md":"0de0ac4e","config_event.md":"cbedfdd0","guide_contact.md":"10c84e73","config_index.md":"4b837d8d","guide_index.md":"59f780b1","guide_js-preview.md":"873b3161","guide_faq.md":"fc7d1e4f"} diff --git a/examples/docs/index.html b/examples/docs/index.html index 4b0a259..f079f13 100644 --- a/examples/docs/index.html +++ b/examples/docs/index.html @@ -15,7 +15,7 @@
Skip to content

vue-office

更易用的文件预览

支持docx、xlsx、pdf文件预览

一站式

提供docx、xlsx、pdf 3种文档的在线预览方案

使用简单

只需提供文档的src即可完成文档预览,支持远程地址、ArrayBuffer、Blob多种格式

支持样式

不仅能预览内容,也支持文档样式,最大限度还原office文件内容

-