add：增加download方法

README.md

@@ -1,9 +1,10 @@
 # vue-office
 
-支持多种文件(**docx、excel、pdf**)预览的vue组件库，支持vue2/3。
+支持多种文件(**docx、excel、pdf**)预览的vue组件库，支持vue2/3。也支持非Vue框架的预览。
 
 [《演示效果》](https://501351981.github.io/vue-office/examples/dist/)
 
+[《非Vue框架预览看这里》](https://501351981.github.io/vue-office/examples/docs/guide/js-preview.html)
 ## 功能特色
 - 一站式：提供docx、pdf、excel多种文档的在线预览方案，有它就够了
 - 简单：只需提供文档的src(网络地址)即可完成文档预览
@@ -181,12 +182,28 @@ export default {
 
 ## 赞助和微信交流
 
-**_如果该项目确实帮助到了您_**，欢迎赞助，以鼓励我将更多的休息时间，投入到该项目的优化中，也欢迎赞助后添加微信交流：\_hit757_
+**_如果该项目确实帮助到了您_**，请您不吝赞助，请我喝杯蜜雪冰城交个朋友，微信：\_hit757_
 
 <img src="https://501351981.github.io/vue-office/examples/dist/static/wx.png" alt="赞助二维码" width="260"/>
 
+打赏记录如下，感谢每一位打赏的朋友
+
+| 时间      | 打赏总金额 |
+|---------|-------|
+| 2023-07 | 0     |
+| 2023-06 | 20.01 |
+| 2023-05 | 70    |
+| 2023-04 | 95    |
+| 2023-03 | 66.66 |
+| 2023-02 | 30    |
+
+
 ### 恳请各位大佬不吝点赞，开源不易，感谢支持~~
 
 
-打个广告，欢迎使用我最近开发的v-focus-next指令，表单中回车之后自动聚焦下一个表单元素，大大提升表单填写的流畅性。
-[《v-focus-next》](https://github.com/501351981/v-focus-next)
+## 我的其他库
+- v-focus-next：一个Vue指令，使用该指令后，在表单中回车之后可以自动聚焦下一个表单元素，大大提升表单填写的流畅性。
+[《v-focus-next》](https://github.com/501351981/v-focus-next)
+
+  
+- HowToCode：前端编程之道，探讨如何写出高质量的前端代码，总结前端编程的各种方法论、原则、思维模型等。[《前端编程之道》](https://github.com/501351981/HowToCode)

core/package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "dev": "node script/bak-vue.js && vite",
     "build": "node script/bak-vue.js && vite build",
-    "lib": "node script/bak-vue.js bak && lerna run build "
+    "lib": "node script/bak-vue.js bak && lerna run build",
+    "lib:js-excel": "node script/bak-vue.js bak && lerna run build --scope @js-preview/excel",
+    "lib:vue-excel": "node script/bak-vue.js bak && lerna run build --scope @vue-office/excel"
   },
   "dependencies": {
     "@babel/preset-env": "^7.22.5",
@@ -16,13 +18,18 @@
     "docx-preview": "^0.1.14",
     "exceljs": "^4.3.0",
     "lodash": "^4.17.21",
+    "postcss": "^8.4.24",
     "rimraf": "^4.1.2",
     "rollup": "^3.26.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "tinycolor2": "^1.6.0",
     "vue-demi": "^0.13.11",
     "x-data-spreadsheet": "^1.1.9"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/composition-api": "^1.7.1",
     "eslint": "^8.36.0",
@@ -30,6 +37,9 @@
     "lerna": "^6.4.1",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-less": "^1.1.3",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "vite": "^4.0.0",
     "vite-plugin-require-transform": "^1.0.9",
     "vite-plugin-vue2": "^2.0.3",

core/packages/js-docx/index.d.ts

@@ -19,10 +19,11 @@ export interface Options {
 }
 
 export interface JsDocxPreview {
-    preview: (src: string | ArrayBuffer | Blob) => Promise<any>,
-    setOptions: (options: Options) => void,
-    setRequestOptions: (requestOptions?: any) => void,
-    destroy: ()=> void,
+    preview: (src: string | ArrayBuffer | Blob) => Promise<any>;
+    download: (fileName?: string) => void;
+    setOptions: (options: Options) => void;
+    setRequestOptions: (requestOptions?: any) => void;
+    destroy: ()=> void;
 }
 declare const jsPreviewDocx: {
     init: (container: HTMLElement, options?: Options, requestOptions?: any) => JsDocxPreview;

core/packages/js-docx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-preview/docx",
   "type" :"module",
-  "version": "0.0.6",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -37,6 +37,5 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "docx-preview": "^0.1.14"
   }
 }

core/packages/js-docx/rollup.config.js

@@ -1,11 +1,16 @@
-import { babel } from '@rollup/plugin-babel';
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+
 export default {
     input: 'index.js',
     output:[
         {
             file: 'lib/index.js',
             name: 'jsPreviewDocx',
-            format: 'es'
+            format: 'es',
+            plugins: [getBabelOutputPlugin({ presets: ['@babel/preset-env'] })]
         },
         {
             file: 'lib/index.umd.js',
@@ -13,5 +18,9 @@ export default {
             format: 'umd'
         }
     ],
-    plugins: [babel({ babelHelpers: 'bundled' })]
+    plugins: [
+        nodeResolve(),
+        commonjs(),
+        terser()
+    ]
 };

core/packages/js-docx/src/main.js

@@ -1,10 +1,12 @@
 import docx from '../../vue-docx/src/docx';
+import {download as downloadFile} from '../../../utils/url.js';
 class JsDocxPreview {
     container = null;
     wrapper = null;
     wrapperMain = null;
     options = {};
     requestOptions = {};
+    fileData = null;
     
     constructor(container, options={}, requestOptions={}) {
         this.container = container;
@@ -29,8 +31,9 @@ class JsDocxPreview {
     }
     preview(src){
         return new Promise((resolve, reject) => {
-            docx.getData(src, this.requestOptions).then(res =>{
-                docx.render(res, this.wrapperMain, this.options).then(() => {
+            docx.getData(src, this.requestOptions).then(async res =>{
+                this.fileData = await docx.getBlob(res);
+                docx.render(this.fileData, this.wrapperMain, this.options).then(() => {
                     resolve();
                 }).catch(e => {
                     docx.render('', this.wrapperMain, this.options);
@@ -42,6 +45,9 @@ class JsDocxPreview {
             });
         });
     }
+    download(fileName){
+        downloadFile(fileName || `js-preview-docx-${new Date().getTime()}.docx`,this.fileData);
+    }
     destroy(){
         this.container.removeChild(this.wrapper);
         this.container = null;

core/packages/js-excel/.babelrc

@@ -1,10 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ]
-  ]
-}

core/packages/js-excel/index.d.ts

@@ -4,10 +4,11 @@ export interface Options {
 }
 
 export interface JsExcelPreview {
-    preview: (src: string) => Promise<any>,
-    setOptions: (options: Options) => void,
-    setRequestOptions: (requestOptions?: any) => void,
-    destroy: ()=> void,
+    preview: (src: string | ArrayBuffer | Blob) => Promise<any>;
+    download: (fileName?: string) => void;
+    setOptions: (options: Options) => void;
+    setRequestOptions: (requestOptions?: any) => void;
+    destroy: ()=> void;
 }
 declare const jsPreviewExcel: {
     init: (container: HTMLElement, options?: Options, requestOptions?: any) => JsExcelPreview;

core/packages/js-excel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-preview/excel",
   "type" :"module",
-  "version": "0.0.1",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -37,10 +37,5 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "x-data-spreadsheet": "^1.1.9",
-    "lodash": "^4.17.21",
-    "exceljs": "^4.3.0",
-    "tinycolor2": "^1.6.0",
-    "dayjs": "^1.11.7"
   }
 }

core/packages/js-excel/rollup.config.js

@@ -1,11 +1,17 @@
-import { babel } from '@rollup/plugin-babel';
+import { getBabelOutputPlugin } from '@rollup/plugin-babel';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import terser from '@rollup/plugin-terser';
+
 export default {
     input: 'index.js',
     output:[
         {
             file: 'lib/index.js',
             name: 'jsPreviewExcel',
-            format: 'es'
+            format: 'es',
+            plugins: [getBabelOutputPlugin({ presets: ['@babel/preset-env'] })]
         },
         {
             file: 'lib/index.umd.js',
@@ -13,5 +19,10 @@ export default {
             format: 'umd'
         }
     ],
-    plugins: [babel({ babelHelpers: 'bundled' })]
+    plugins: [
+        nodeResolve(),
+        commonjs(),
+        postcss(),
+        terser()
+    ]
 };

core/packages/js-excel/src/main.js

@@ -3,6 +3,7 @@ import {getData, readExcelData, transferExcelToSpreadSheet} from '../../vue-exce
 import {renderImage, clearCache} from '../../vue-excel/src/media';
 import {readOnlyInput} from '../../vue-excel/src/hack';
 import {debounce} from 'lodash';
+import {download as downloadFile} from "../../../utils/url.js";
 class JsExcelPreview {
     container = null;
     wrapper = null;
@@ -18,6 +19,7 @@ class JsExcelPreview {
     xs = null;
     offset = null;
     observer = null;
+    fileData = null;
 
     constructor(container, options={}, requestOptions={}) {
         this.container = container;
@@ -42,7 +44,7 @@ class JsExcelPreview {
             showContextmenu: this.options.showContextmenu || false,
             view: {
                 height: () => this.wrapper && this.wrapper.clientHeight || 300,
-                width: () => this.wrapper && this.wrapper.clientWidth || 300,
+                width: () => this.wrapper && this.wrapper.clientWidth || 1200,
             },
             row: {
                 height: 24,
@@ -86,6 +88,7 @@ class JsExcelPreview {
         this.ctx = canvas.getContext('2d');
     }
     renderExcel(buffer){
+        this.fileData = buffer;
         return readExcelData(buffer).then(workbook => {
             if (!workbook._worksheets || workbook._worksheets.length === 0) {
                 throw new Error('未获取到数据，可能文件格式不正确或文件已损坏');
@@ -133,6 +136,9 @@ class JsExcelPreview {
             });
         }));
     }
+    download(fileName){
+        downloadFile(fileName || `js-preview-excel-${new Date().getTime()}.xlsx`,this.fileData);
+    }
     destroy(){
         this.observer.disconnect();
         this.container.removeChild(this.wrapper);

core/packages/js-pdf/index.d.ts

@@ -14,10 +14,11 @@ export interface Options {
 }
 
 export interface JsPdfPreview {
-    preview: (src: string) => Promise<any>,
-    setOptions: (options: Options) => void,
-    setRequestOptions: (requestOptions?: any) => void,
-    destroy: ()=> void,
+    preview: (src: string | ArrayBuffer | Blob) => Promise<any>;
+    download: (fileName?: string) => void;
+    setOptions: (options: Options) => void;
+    setRequestOptions: (requestOptions?: any) => void;
+    destroy: ()=> void;
 }
 declare const jsPreviewPdf: {
     init: (container: HTMLElement, options?: Options, requestOptions?: any) => JsPdfPreview;

core/packages/js-pdf/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-preview/pdf",
   "type" :"module",
-  "version": "0.0.1",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -36,6 +36,5 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "lodash": "^4.17.21"
   }
 }

core/packages/js-pdf/rollup.config.js

@@ -1,11 +1,16 @@
-import { babel } from '@rollup/plugin-babel';
+import {getBabelOutputPlugin} from '@rollup/plugin-babel';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+
 export default {
     input: 'index.js',
     output:[
         {
             file: 'lib/index.js',
             name: 'jsPreviewPdf',
-            format: 'es'
+            format: 'es',
+            plugins: [getBabelOutputPlugin({ presets: ['@babel/preset-env'] })]
         },
         {
             file: 'lib/index.umd.js',
@@ -13,5 +18,9 @@ export default {
             format: 'umd'
         }
     ],
-    plugins: [babel({ babelHelpers: 'bundled' })]
+    plugins: [
+        nodeResolve(),
+        commonjs(),
+        terser()
+    ]
 };

core/packages/js-pdf/src/main.js

@@ -1,6 +1,6 @@
 import {worker} from '../../vue-pdf/src/worker';
 import {pdfjsLib} from '../../vue-pdf/src/pdf';
-import {getUrl, loadScript} from '../../../utils/url';
+import {download as downloadFile, getUrl, loadScript} from '../../../utils/url';
 import omit from 'lodash/omit';
 
 const pdfJsLibSrc = `data:text/javascript;base64,${pdfjsLib}`;
@@ -145,6 +145,11 @@ class JsPdfPreview{
             });
         }));
     }
+    download(fileName){
+        this.pdfDocument && this.pdfDocument._transport && this.pdfDocument._transport.getData().then(fileData=>{
+            downloadFile(fileName || `js-preview-pdf-${new Date().getTime()}.pdf`,fileData.buffer);
+        });
+    }
     destroy(){
         this.container.removeChild(this.wrapper);
         this.container = null;

core/packages/vue-docx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/docx",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "files": [

core/packages/vue-docx/src/docx.js

@@ -21,6 +21,18 @@ function fetchDocx(src, options) {
     });
 }
 
+async function getBlob(data){
+    let blob;
+    if (data instanceof Blob) {
+        blob = data;
+    } else if (data instanceof Response) {
+        blob = await data.blob();
+    } else if (data instanceof ArrayBuffer) {
+        blob = new Blob([data]);
+    }
+    return blob
+}
+
 function render(data, container, options = {}) {
     if (!data) {
         container.innerHTML = '';
@@ -39,5 +51,6 @@ function render(data, container, options = {}) {
 
 export default {
     getData,
-    render
+    render,
+    getBlob
 };

core/packages/vue-docx/src/main.vue

@@ -1,6 +1,7 @@
 <script>
 import {defineComponent, ref, onMounted, watch} from 'vue-demi';
 import docx from './docx';
+import {download as downloadFile} from "../../../utils/url";
 
 export default defineComponent({
     name: 'VueOfficeDocx',
@@ -18,11 +19,12 @@ export default defineComponent({
     emits: ['rendered', 'error'],
     setup(props, {emit}) {
         const rootRef = ref(null);
-
+        let fileData = null;
         function init() {
             let container = rootRef.value;
-            docx.getData(props.src, props.requestOptions).then(res => {
-                docx.render(res, container, props.options).then(() => {
+            docx.getData(props.src, props.requestOptions).then(async res => {
+                fileData = await docx.getBlob(res);
+                docx.render(fileData, container, props.options).then(() => {
                     emit('rendered');
                 }).catch(e => {
                     docx.render('', container, props.options);
@@ -49,8 +51,12 @@ export default defineComponent({
                 });
             }
         });
+        function download(fileName){
+            downloadFile(fileName || `vue-office-docx-${new Date().getTime()}.docx`,fileData);
+        }
         return {
-            rootRef
+            rootRef,
+            download
         };
     }
 });

core/packages/vue-excel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/excel",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "files": [

core/packages/vue-excel/src/main.vue

@@ -5,6 +5,7 @@ import {getData, readExcelData, transferExcelToSpreadSheet} from './excel';
 import {renderImage, clearCache} from './media';
 import {readOnlyInput} from './hack';
 import {debounce} from 'lodash';
+import {download as downloadFile} from '../../../utils/url';
 
 export default defineComponent({
     name: 'VueOfficeExcel',
@@ -33,8 +34,10 @@ export default defineComponent({
         let ctx = null;
         let xs = null;
         let offset = null;
+        let fileData = null;
 
         function renderExcel(buffer) {
+            fileData = buffer;
             readExcelData(buffer).then(workbook => {
                 if (!workbook._worksheets || workbook._worksheets.length === 0) {
                     throw new Error('未获取到数据，可能文件格式不正确或文件已损坏');
@@ -76,7 +79,7 @@ export default defineComponent({
                     showContextmenu: props.options.showContextmenu || false,
                     view: {
                         height: () => wrapperRef.value && wrapperRef.value.clientHeight || 300,
-                        width: () => wrapperRef.value && wrapperRef.value.clientWidth || 300,
+                        width: () => wrapperRef.value && wrapperRef.value.clientWidth || 1200,
                     },
                     row: {
                         height: 24,
@@ -139,9 +142,13 @@ export default defineComponent({
                 xs.loadData({});
             }
         });
+        function download(fileName){
+            downloadFile(fileName || `vue-office-excel-${new Date().getTime()}.xlsx`,fileData);
+        }
         return {
             wrapperRef,
-            rootRef
+            rootRef,
+            download
         };
     }
 });

core/packages/vue-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-office/pdf",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "files": [

core/packages/vue-pdf/src/main.vue

@@ -2,7 +2,7 @@
 import {defineComponent, ref, onMounted, watch} from 'vue-demi';
 import {worker} from './worker';
 import {pdfjsLib} from './pdf';
-import {getUrl, loadScript} from '../../../utils/url';
+import {download as downloadFile, getUrl, loadScript} from '../../../utils/url';
 import omit from 'lodash/omit';
 
 const pdfJsLibSrc = `data:text/javascript;base64,${pdfjsLib}`;
@@ -28,6 +28,7 @@ export default defineComponent({
     emits: ['rendered', 'error'],
     setup(props, {emit}) {
         let pdfDocument = null;
+        let loadingTask = null;
         const rootRef = ref([]);
         const numPages = ref(0);
 
@@ -49,7 +50,7 @@ export default defineComponent({
                 numPages.value = 0;
                 return;
             }
-            const loadingTask = window.pdfjsLib.getDocument({
+            loadingTask = window.pdfjsLib.getDocument({
                 url: getUrl(props.src),
                 cMapUrl: `${props.staticFileUrl.endsWith('/') ? props.staticFileUrl : props.staticFileUrl + '/'}cmaps/`,
                 cMapPacked: true,
@@ -125,9 +126,15 @@ export default defineComponent({
         watch(() => props.src, () => {
             checkPdfLib().then(init);
         });
+        function download(fileName){
+            pdfDocument && pdfDocument._transport && pdfDocument._transport.getData().then(fileData=>{
+                downloadFile(fileName || `vue-office-pdf-${new Date().getTime()}.pdf`,fileData.buffer);
+            });
+        }
         return {
             rootRef,
-            numPages
+            numPages,
+            download
         };
     }
 });

core/src/components/DocxDemo.vue

@@ -1,4 +1,5 @@
 <script setup>
+import {ref} from 'vue';
 import VueOfficeDocx from '../../packages/vue-docx/index';
 import PreviewWrapper from '../common/PreviewWrapper.vue';
 import useLoading from '../hooks/useLoading.js';
@@ -13,6 +14,12 @@ function onError(e){
 const defaultSrc = location.origin +
     (location.pathname + '/').replace('//', '/')
     + 'static/test-files/test.docx';
+
+const docxRef = ref();
+
+// setTimeout(()=>{
+//    console.log( docxRef.value.download());
+// }, 2000);
 </script>
 
 <template>
@@ -23,6 +30,7 @@ const defaultSrc = location.origin +
   >
     <template  v-slot="slotProps">
       <VueOfficeDocx
+          ref="docxRef"
           :src="slotProps.src"
           style="flex: 1;height: 0"
           @rendered="onRendered"

core/src/components/ExcelDemo.vue

@@ -3,6 +3,7 @@ import VueOfficeExcel from '../../packages/vue-excel/index';
 import '../../packages/vue-excel/src/index.css';
 import PreviewWrapper from '../common/PreviewWrapper.vue';
 import useLoading from '../hooks/useLoading.js';
+import {ref} from "vue";
 function onRendered(){
     useLoading.hideLoading();
 }
@@ -14,6 +15,11 @@ function onError(e){
 const defaultSrc = location.origin +
     (location.pathname + '/').replace('//', '/')
     + 'static/test-files/test.xlsx';
+const docxRef = ref();
+
+// setTimeout(()=>{
+//     console.log( docxRef.value.download());
+// }, 2000);
 </script>
 
 <template>
@@ -24,6 +30,7 @@ const defaultSrc = location.origin +
   >
     <template  v-slot="slotProps">
       <VueOfficeExcel
+          ref="docxRef"
           :src="slotProps.src"
           style="flex: 1;height: 0"
           v-loading="true"

core/src/components/JsDocxDemo.vue

@@ -14,6 +14,7 @@ onMounted(() => {
     myDocxPreview.preview('/vue-office/examples/dist/static/test-files/test.docx').then(_=>{
         console.log('docx preview done');
         setTimeout(()=>{
+            // myDocxPreview.download();
             myDocxPreview.preview('/vue-office/examples/dist/static/test-files/test2.docx');
         }, 3000);
     }).catch(err=>{

core/src/components/JsExcelDemo.vue

@@ -12,6 +12,7 @@ const dom = ref(null);
 onMounted(() => {
     window.myExcelPreview = jsExcel.init(dom.value);
     window.myExcelPreview.preview('/vue-office/examples/dist/static/test-files/test.xlsx').then(_=>{
+        // window.myExcelPreview.download();
         console.log('excel preview done', window.myExcelPreview);
     }).catch(err=>{
         console.log('err',err);

core/src/components/JsPdfDemo.vue

@@ -12,6 +12,7 @@ const dom = ref(null);
 onMounted(() => {
     window.myPdfPreview = jsPdf.init(dom.value);
     window.myPdfPreview.preview('/vue-office/examples/dist/static/test-files/test.pdf').then(_=>{
+        // window.myPdfPreview.download();
         console.log('excel preview done', window.myPdfPreview);
     }).catch(err=>{
         console.log('err',err);

core/src/components/PdfDemo.vue

@@ -2,6 +2,7 @@
 import VueOfficePdf from '../../packages/vue-pdf/index';
 import PreviewWrapper from '../common/PreviewWrapper.vue';
 import useLoading from '../hooks/useLoading.js';
+import {ref} from "vue";
 function onRendered(){
     useLoading.hideLoading();
 }
@@ -12,6 +13,11 @@ function onError(e){
 const defaultSrc = location.origin + 
     (location.pathname + '/').replace('//', '/') 
     + 'static/test-files/test.pdf';
+const docxRef = ref();
+
+// setTimeout(()=>{
+//     console.log( docxRef.value.download());
+// }, 2000);
 </script>
 
 <template>
@@ -22,6 +28,7 @@ const defaultSrc = location.origin +
   >
     <template  v-slot="slotProps">
       <VueOfficePdf
+          ref="docxRef"
           :src="slotProps.src"
           style="flex: 1;height: 0"
           :options="{}"

core/utils/url.js

@@ -1,27 +1,47 @@
 export function getUrl(src){
     if(typeof src === 'string'){
-        return src
+        return src;
     }else if(src instanceof Blob){
-        return URL.createObjectURL(src)
+        return URL.createObjectURL(src);
     }else if(src instanceof ArrayBuffer){
-        return URL.createObjectURL(new Blob([src]))
+        return URL.createObjectURL(new Blob([src]));
     }else if(src instanceof Response){
-        return URL.createObjectURL(src.blob())
+        return URL.createObjectURL(src.blob());
     }else{
-        return  src
+        return src;
     }
 }
 
 export function loadScript(src){
     return new Promise(((resolve, reject) => {
-        let script = document.createElement('script')
-        script.src = src
+        let script = document.createElement('script');
+        script.src = src;
         script.onload = function (){
-            resolve()
-        }
+            resolve();
+        };
         script.onerror = function (){
-            reject()
-        }
-        document.body.append(script)
-    }))
+            reject();
+        };
+        document.body.append(script);
+    }));
+}
+
+export async function download(filename, data){
+    if(!data){
+        return; 
+    }
+   if (data instanceof ArrayBuffer) {
+       data = new Blob([data]);
+    }
+    downloadFile(filename, URL.createObjectURL(data));
+}
+
+export function downloadFile(filename, href){
+    let eleLink = document.createElement('a');
+    eleLink.download = filename;
+    eleLink.style.display = 'none';
+    eleLink.href = href;
+    document.body.appendChild(eleLink);
+    eleLink.click();
+    document.body.removeChild(eleLink);
 }

docs/.vitepress/config.js

@@ -27,6 +27,7 @@ export default defineConfig({
             { text: 'docx文件预览', link: '/guide/preview-docx' },
             { text: 'xlsx文件预览', link: '/guide/preview-xlsx' },
             { text: 'pdf文件预览', link: '/guide/preview-pdf' },
+            { text: '非Vue框架进行文件预览', link: '/guide/js-preview' },
             { text: '常见问题', link: '/guide/faq' },
             { text: '联系我', link: '/guide/contact' }
           ]

docs/guide/js-preview.md

@@ -0,0 +1,171 @@
+# 非Vue框架文件预览
+
+为了在非Vue的框架中进行Office文件预览，增加了通过js进行预览的方式。
+
+docx、excel、pdf三个预览库的API几乎一致，只需要初始化时传入要挂载的Dom，然后传递要预览的文件地址，即可完成预览，非常地简单。
+## docx文件预览
+
+- 安装依赖库
+
+```shell
+# docx文件预览库
+npm i @js-preview/docx
+```
+
+- 预览
+
+```javascript
+import jsPreviewDocx from "@js-preview/docx";
+import '@js-preview/docx/lib/index.css'
+
+//初始化时指明要挂载的父元素Dom节点
+const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));
+
+//传递要预览的文件地址即可
+myDocxPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx').then(res=>{
+    console.log('预览完成');
+}).catch(e=>{
+    console.log('预览失败', e);
+})
+
+```
+
+## excel文件预览
+
+- 安装依赖库
+
+```shell
+# docx文件预览库
+npm i @js-preview/excel
+```
+
+- 预览
+
+```javascript
+import jsPreviewExcel from "@js-preview/excel";
+import '@js-preview/excel/lib/index.css';
+
+const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
+myExcelPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx').then(res=>{
+    console.log('预览完成');
+}).catch(e=>{
+    console.log('预览失败', e);
+})
+
+```
+
+
+## pdf文件预览
+
+- 安装依赖库
+
+```shell
+# docx文件预览库
+npm i @js-preview/pdf
+```
+
+- 预览
+
+```javascript
+import jsPreviewPdf from "@js-preview/pdf";
+
+const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'));
+myPdfPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf').then(res=>{
+    console.log('预览完成');
+}).catch(e=>{
+    console.log('预览失败', e);
+})
+
+```
+
+## API
+
+### init方法
+
+三种库的init方法保持一致，init方法会返回预览对象。
+```ts
+init: (container: HTMLElement, options?: Options, requestOptions?: any) => JsPdfPreview | JsExcelPreview |JsDocxPreview;
+```
+
+- container
+
+预览挂载的父容器Dom
+
+- options
+
+预览支持的配置参数，三个预览库支持的配置不同。
+
+docx预览支持的配置，详细说明见库docx-preview：
+```ts
+export interface Options {
+    inWrapper?: boolean;
+    ignoreWidth?: boolean;
+    ignoreHeight?: boolean;
+    ignoreFonts?: boolean;
+    breakPages?: boolean;
+    debug?: boolean;
+    experimental?: boolean;
+    className?: string;
+    trimXmlDeclaration?: boolean;
+    renderHeaders?: boolean;
+    renderFooters?: boolean;
+    renderFootnotes?: boolean;
+    renderEndnotes?: boolean;
+    ignoreLastRenderedPageBreak?: boolean;
+    useBase64URL?: boolean;
+    useMathMLPolyfill?: boolean;
+    renderChanges?: boolean;
+}
+```
+
+excel支持的配置
+```ts
+export interface Options {
+    minColLength?: number;  //excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
+    showContextmenu?: boolean; //是否显示右键菜单，默认false
+}
+```
+
+pdf支持的配置，详情见https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html
+
+```ts
+export interface Options {
+    staticFileUrl?: string;
+    width?: number;
+    data?: BinaryData;
+    httpHeaders?: Object;
+    withCredentials?: boolean;
+    password?: string;
+    length?: number;
+    docBaseUrl?: string;
+    cMapUrl?: string;
+    cMapPacked?: boolean;
+    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方法
+
+卸载方法，可以在组件销毁前调用预览对象的卸载方法，避免长期使用造成内存泄露。
+
+## 如果该项目帮助了您，还请您不吝点赞

examples/docs/assets/guide_js-preview.md.873b3161.js

@@ -0,0 +1,64 @@
+import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const A=JSON.parse('{"title":"非Vue框架文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/js-preview.md"}'),p={name:"guide/js-preview.md"},o=l(`<h1 id="非vue框架文件预览" tabindex="-1">非Vue框架文件预览 <a class="header-anchor" href="#非vue框架文件预览" aria-label="Permalink to &quot;非Vue框架文件预览&quot;">​</a></h1><p>为了在非Vue的框架中进行Office文件预览，增加了通过js进行预览的方式。</p><p>docx、excel、pdf三个预览库的API几乎一致，只需要初始化时传入要挂载的Dom，然后传递要预览的文件地址，即可完成预览，非常地简单。</p><h2 id="docx文件预览" tabindex="-1">docx文件预览 <a class="header-anchor" href="#docx文件预览" aria-label="Permalink to &quot;docx文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
+<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/docx</span></span></code></pre></div><ul><li>预览</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/docx</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@js-preview/docx/lib/index.css</span><span style="color:#89DDFF;">&#39;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">//初始化时指明要挂载的父元素Dom节点</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myDocxPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewDocx</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">docx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#676E95;font-style:italic;">//传递要预览的文件地址即可</span></span>
+<span class="line"><span style="color:#A6ACCD;">myDocxPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="excel文件预览" tabindex="-1">excel文件预览 <a class="header-anchor" href="#excel文件预览" aria-label="Permalink to &quot;excel文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
+<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/excel</span></span></code></pre></div><ul><li>预览</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewExcel </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/excel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@js-preview/excel/lib/index.css</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myExcelPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewExcel</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">excel</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">myExcelPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="pdf文件预览" tabindex="-1">pdf文件预览 <a class="header-anchor" href="#pdf文件预览" aria-label="Permalink to &quot;pdf文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
+<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/pdf</span></span></code></pre></div><ul><li>预览</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewPdf </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/pdf</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myPdfPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewPdf</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">myPdfPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="init方法" tabindex="-1">init方法 <a class="header-anchor" href="#init方法" aria-label="Permalink to &quot;init方法&quot;">​</a></h3><p>三种库的init方法保持一致，init方法会返回预览对象。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">init</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">HTMLElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">options</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">requestOptions</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> JsPdfPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> JsExcelPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">JsDocxPreview</span><span style="color:#89DDFF;">;</span></span></code></pre></div><ul><li>container</li></ul><p>预览挂载的父容器Dom</p><ul><li>options</li></ul><p>预览支持的配置参数，三个预览库支持的配置不同。</p><p>docx预览支持的配置，详细说明见库docx-preview：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">inWrapper</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">ignoreWidth</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">ignoreHeight</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">ignoreFonts</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">breakPages</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">debug</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">experimental</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">className</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">trimXmlDeclaration</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">renderHeaders</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">renderFooters</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">renderFootnotes</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">renderEndnotes</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">ignoreLastRenderedPageBreak</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">useBase64URL</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">useMathMLPolyfill</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">renderChanges</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>excel支持的配置</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">minColLength</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  </span><span style="color:#676E95;font-style:italic;">//excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">showContextmenu</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//是否显示右键菜单，默认false</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>pdf支持的配置，详情见<a href="https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html" target="_blank" rel="noreferrer">https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html</a></p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">staticFileUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">width</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">BinaryData</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">httpHeaders</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">withCredentials</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">password</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">docBaseUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">cMapUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">cMapPacked</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">CMapReaderFactory</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">useSystemFonts</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="preview方法" tabindex="-1">preview方法 <a class="header-anchor" href="#preview方法" aria-label="Permalink to &quot;preview方法&quot;">​</a></h3><p>调用preview方法进行文件的预览。</p><p>preview方法接收参数支持三种： 文件url地址、文件ArrayBuffer格式数据、文件blob格式。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">preview</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">src</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ArrayBuffer</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Blob</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">any</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><p>url格式适合有文件静态地址的情况，ArrayBuffer格式适合文件上传前的预览。</p><h3 id="download方法" tabindex="-1">download方法 <a class="header-anchor" href="#download方法" aria-label="Permalink to &quot;download方法&quot;">​</a></h3><p>调用download进行文件下载，参数名为下载的文件名称，可不传。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">download</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">fileName</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">void;</span></span></code></pre></div><h3 id="destroy方法" tabindex="-1">destroy方法 <a class="header-anchor" href="#destroy方法" aria-label="Permalink to &quot;destroy方法&quot;">​</a></h3><p>卸载方法，可以在组件销毁前调用预览对象的卸载方法，避免长期使用造成内存泄露。</p><h2 id="如果该项目帮助了您-还请您不吝点赞" tabindex="-1">如果该项目帮助了您，还请您不吝点赞 <a class="header-anchor" href="#如果该项目帮助了您-还请您不吝点赞" aria-label="Permalink to &quot;如果该项目帮助了您，还请您不吝点赞&quot;">​</a></h2>`,43),e=[o];function t(c,r,y,D,F,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};

examples/docs/assets/guide_js-preview.md.873b3161.lean.js

@@ -0,0 +1 @@
+import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const A=JSON.parse('{"title":"非Vue框架文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/js-preview.md"}'),p={name:"guide/js-preview.md"},o=l("",43),e=[o];function t(c,r,y,D,F,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};

examples/docs/config/index.html

@@ -36,8 +36,8 @@
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">password</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//string, 加密pdf的密码</span></span>
 <span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//更多配置参见 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html</span></span>
 <span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="staticfileurl-pdf特有属性" tabindex="-1">staticFileUrl [pdf特有属性] <a class="header-anchor" href="#staticfileurl-pdf特有属性" aria-label="Permalink to &quot;staticFileUrl [pdf特有属性]&quot;">​</a></h2><ul><li>类型： String</li></ul><p>pdf渲染时可能会请求一些bcmap文件，这些文件默认从 <a href="https://unpkg.com/pdfjs-dist@3.1.81/" target="_blank" rel="noreferrer">https://unpkg.com/pdfjs-dist@3.1.81/</a> 加载，但是可能存在网络不通问题，如果遇到这种问题，可以将这些文件放到自己静态目录，然后修改该属性，告诉组件去这里请求bcmap文件。</p><p>涉及的文件存放在当前github项目中examples/public/cmaps目录下，可将cmaps目录复制到你的静态服务目录下，然后修改staticFileUrl为cmaps文件夹对应的父地址，必须已http或https开头，如 <a href="http://yourdomain/static/" target="_blank" rel="noreferrer">http://yourdomain/static/</a></p></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><!----></div><div class="pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/config/event.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>事件</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-xlsx.md\":\"0de0ac4e\",\"index.md\":\"2dfe7e9d\",\"config_index.md\":\"da90cec3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-docx.md\":\"747caaea\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
-__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"da90cec3\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_preview-docx.md\":\"747caaea\",\"guide_js-preview.md\":\"873b3161\",\"guide_faq.md\":\"32e428fb\"}")
+__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"outlineTitle\":\"跳转到\",\"docFooter\":{\"next\":\"下一页\",\"prev\":\"上一页\"},\"sidebar\":{\"/guide\":[{\"text\":\"指南\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/guide/\"},{\"text\":\"docx文件预览\",\"link\":\"/guide/preview-docx\"},{\"text\":\"xlsx文件预览\",\"link\":\"/guide/preview-xlsx\"},{\"text\":\"pdf文件预览\",\"link\":\"/guide/preview-pdf\"},{\"text\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq\"},{\"text\":\"联系我\",\"link\":\"/guide/contact\"}]}],\"/config\":[{\"text\":\"配置参考\",\"items\":[{\"text\":\"属性\",\"link\":\"/config/\"},{\"text\":\"事件\",\"link\":\"/config/event\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/501351981/vue-office\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
     
   </body>
 </html>

examples/docs/hashmap.json

@@ -1 +1 @@
-{"guide_preview-xlsx.md":"0de0ac4e","index.md":"2dfe7e9d","config_index.md":"da90cec3","guide_preview-pdf.md":"9bd426ea","guide_contact.md":"10c84e73","config_event.md":"cbedfdd0","guide_preview-docx.md":"747caaea","guide_index.md":"59f780b1","guide_faq.md":"32e428fb"}
+{"config_event.md":"cbedfdd0","guide_index.md":"59f780b1","config_index.md":"da90cec3","index.md":"2dfe7e9d","guide_preview-xlsx.md":"0de0ac4e","guide_contact.md":"10c84e73","guide_preview-pdf.md":"9bd426ea","guide_preview-docx.md":"747caaea","guide_js-preview.md":"873b3161","guide_faq.md":"32e428fb"}