增加通过纯js方式进行预览

2025-07-25 07:41:42 +08:00 · 2023-07-02 10:22:02 +08:00 · 2023-07-02 10:22:02 +08:00 · 6c239dd771
commit 6c239dd771
parent dbdf086ff6
73 changed files with 2163 additions and 9 deletions
--- a/core/package.json
+++ b/core/package.json
@ -8,6 +8,8 @@
    "lib": "node script/bak-vue.js bak && lerna run build "
  },
  "dependencies": {
+    "@babel/preset-env": "^7.22.5",
+    "@rollup/plugin-babel": "^6.0.3",
    "@vue/compiler-sfc": "3.2.45",
    "ant-design-vue": "^3.2.17",
    "dayjs": "^1.11.7",
@ -15,6 +17,7 @@
    "exceljs": "^4.3.0",
    "lodash": "^4.17.21",
    "rimraf": "^4.1.2",
+    "rollup": "^3.26.0",
    "tinycolor2": "^1.6.0",
    "vue-demi": "^0.13.11",
    "x-data-spreadsheet": "^1.1.9"
--- a/core/packages/js-docx/.babelrc
+++ b/core/packages/js-docx/.babelrc
@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}
--- a/core/packages/js-docx/.npmrc
+++ b/core/packages/js-docx/.npmrc
--- a/core/packages/js-docx/index.css
+++ b/core/packages/js-docx/index.css
@ -0,0 +1 @@
+.vue-office-docx{height:100%;overflow-y:auto}.vue-office-docx .docx-wrapper>section.docx{margin-bottom:5px}@media screen and (max-width: 800px){.vue-office-docx .docx-wrapper{padding:10px}.vue-office-docx .docx-wrapper>section.docx{padding:10px!important;width:100%!important}}
--- a/core/packages/js-docx/index.d.ts
+++ b/core/packages/js-docx/index.d.ts
@ -0,0 +1,30 @@
+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;
+}
+
+export interface JsDocxPreview {
+    preview: (src: string | ArrayBuffer | Blob) => Promise<any>,
+    setOptions: (options: Options) => void,
+    setRequestOptions: (requestOptions?: any) => void,
+    destroy: ()=> void,
+}
+declare const jsPreviewDocx: {
+    init: (container: HTMLElement, options?: Options, requestOptions?: any) => JsDocxPreview;
+};
+export default  jsPreviewDocx;
--- a/core/packages/js-docx/index.js
+++ b/core/packages/js-docx/index.js
@ -0,0 +1,5 @@
+import {init} from './src/main';
+
+export default {
+    init
+};
--- a/core/packages/js-docx/package.json
+++ b/core/packages/js-docx/package.json
@ -0,0 +1,42 @@
+{
+  "name": "@js-preview/docx",
+  "type" :"module",
+  "version": "0.0.6",
+  "description": "",
+  "main": "lib/index.js",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "clean": "rimraf lib",
+    "copyReadme": "cp ../../../README.md README.md",
+    "copyType": "cp index.d.ts lib/index.d.ts",
+    "copyCss": "cp ./index.css ./lib/index.css",
+    "copy": "npm run copyCss && npm run copyType && npm run copyReadme",
+    "build": "npm run clean && rollup --config rollup.config.js && npm run copy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:501351981/vue-office.git"
+  },
+  "keywords": [
+    "vue",
+    "docx",
+    "pdf",
+    "ppt",
+    "excel",
+    "docx-preview",
+    "excel-preview",
+    "pdf-preview"
+  ],
+  "license": "MIT",
+  "author": "微信: _hit757_",
+  "gitHead": "d20568113bec480f6ca72924f6d0c1e3b0f1fe15",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "docx-preview": "^0.1.14"
+  }
+}
--- a/core/packages/js-docx/rollup.config.js
+++ b/core/packages/js-docx/rollup.config.js
@ -0,0 +1,17 @@
+import { babel } from '@rollup/plugin-babel';
+export default {
+    input: 'index.js',
+    output:[
+        {
+            file: 'lib/index.js',
+            name: 'jsPreviewDocx',
+            format: 'es'
+        },
+        {
+            file: 'lib/index.umd.js',
+            name: 'jsPreviewDocx',
+            format: 'umd'
+        }
+    ],
+    plugins: [babel({ babelHelpers: 'bundled' })]
+};
--- a/core/packages/js-docx/src/main.js
+++ b/core/packages/js-docx/src/main.js
@ -0,0 +1,56 @@
+import docx from '../../vue-docx/src/docx';
+class JsDocxPreview {
+    container = null;
+    wrapper = null;
+    wrapperMain = null;
+    options = {};
+    requestOptions = {};
+    
+    constructor(container, options={}, requestOptions={}) {
+        this.container = container;
+        this.options = options;
+        this.requestOptions = requestOptions;
+        this.createWrapper();
+    }
+    createWrapper(){
+        this.wrapper = document.createElement('div');
+        this.wrapper.className = 'vue-office-docx';
+        this.wrapperMain = document.createElement('div');
+        this.wrapperMain.className = 'vue-office-docx-main';
+        this.wrapper.appendChild(this.wrapperMain);
+        this.container.appendChild(this.wrapper);
+    }
+
+    setOptions(options) {
+        this.options = options;
+    }
+    setRequestOptions(requestOptions) {
+        this.requestOptions = requestOptions;
+    }
+    preview(src){
+        return new Promise((resolve, reject) => {
+            docx.getData(src, this.requestOptions).then(res =>{
+                docx.render(res, this.wrapperMain, this.options).then(() => {
+                    resolve();
+                }).catch(e => {
+                    docx.render('', this.wrapperMain, this.options);
+                    reject(e);
+                });
+            }).catch(err=>{
+                docx.render('', this.wrapperMain, this.options);
+                reject(err);
+            });
+        });
+    }
+    destroy(){
+        this.container.removeChild(this.wrapper);
+        this.container = null;
+        this.wrapper = null;
+        this.wrapperMain = null;
+        this.options = null;
+        this.requestOptions = null;
+    }
+}
+export function init(container, options, requestOptions){
+    return new JsDocxPreview(container, options, requestOptions);
+}
--- a/core/packages/js-excel/.babelrc
+++ b/core/packages/js-excel/.babelrc
@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}
--- a/core/packages/js-excel/.npmrc
+++ b/core/packages/js-excel/.npmrc
--- a/core/packages/js-excel/index.css
+++ b/core/packages/js-excel/index.css
@ -0,0 +1,762 @@
+.x-spreadsheet {
+  font-size: 13px;
+  line-height: normal;
+  user-select: none;
+  -moz-user-select: none;
+  font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
+  box-sizing: content-box;
+  background: #fff;
+  -webkit-font-smoothing: antialiased;
+}
+.x-spreadsheet textarea {
+  font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
+}
+.x-spreadsheet-sheet {
+  position: relative;
+  overflow: hidden;
+}
+.x-spreadsheet-table {
+  vertical-align: bottom;
+}
+.x-spreadsheet-tooltip {
+  font-family: inherit;
+  position: absolute;
+  padding: 5px 10px;
+  color: #fff;
+  border-radius: 1px;
+  background: #000000;
+  font-size: 12px;
+  z-index: 201;
+}
+.x-spreadsheet-tooltip:before {
+  pointer-events: none;
+  position: absolute;
+  left: calc(50% - 4px);
+  top: -4px;
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: 1;
+  box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.3);
+}
+.x-spreadsheet-color-palette {
+  padding: 5px;
+}
+.x-spreadsheet-color-palette table {
+  margin: 0;
+  padding: 0;
+  border-collapse: separate;
+  border-spacing: 2;
+  background: #fff;
+}
+.x-spreadsheet-color-palette table td {
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.x-spreadsheet-color-palette table td:hover {
+  border-color: #ddd;
+}
+.x-spreadsheet-color-palette table td .x-spreadsheet-color-palette-cell {
+  width: 16px;
+  height: 16px;
+}
+.x-spreadsheet-border-palette {
+  padding: 6px;
+}
+.x-spreadsheet-border-palette table {
+  margin: 0;
+  padding: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: #fff;
+  table-layout: fixed;
+}
+.x-spreadsheet-border-palette table td {
+  margin: 0;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-left {
+  border-right: 1px solid #eee;
+  padding-right: 6px;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  text-align: center;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell:hover {
+  background-color: #eee;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-right {
+  padding-left: 6px;
+}
+.x-spreadsheet-border-palette .x-spreadsheet-border-palette-right .x-spreadsheet-line-type {
+  position: relative;
+  left: 0;
+  top: -3px;
+}
+.x-spreadsheet-dropdown {
+  position: relative;
+}
+.x-spreadsheet-dropdown .x-spreadsheet-dropdown-content {
+  position: absolute;
+  z-index: 200;
+  background: #fff;
+  box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+}
+.x-spreadsheet-dropdown.bottom-left .x-spreadsheet-dropdown-content {
+  top: calc(100% + 5px);
+  left: 0;
+}
+.x-spreadsheet-dropdown.bottom-right .x-spreadsheet-dropdown-content {
+  top: calc(100% + 5px);
+  right: 0;
+}
+.x-spreadsheet-dropdown.top-left .x-spreadsheet-dropdown-content {
+  bottom: calc(100% + 5px);
+  left: 0;
+}
+.x-spreadsheet-dropdown.top-right .x-spreadsheet-dropdown-content {
+  bottom: calc(100% + 5px);
+  right: 0;
+}
+.x-spreadsheet-dropdown .x-spreadsheet-dropdown-title {
+  padding: 0 5px;
+  display: inline-block;
+}
+/* resizer **/
+.x-spreadsheet-resizer {
+  position: absolute;
+  z-index: 11;
+}
+.x-spreadsheet-resizer .x-spreadsheet-resizer-hover {
+  background-color: rgba(75, 137, 255, 0.25);
+}
+.x-spreadsheet-resizer .x-spreadsheet-resizer-line {
+  position: absolute;
+}
+.x-spreadsheet-resizer.horizontal {
+  cursor: row-resize;
+}
+.x-spreadsheet-resizer.horizontal .x-spreadsheet-resizer-line {
+  border-bottom: 2px dashed #4b89ff;
+  left: 0;
+  bottom: 0;
+}
+.x-spreadsheet-resizer.vertical {
+  cursor: col-resize;
+}
+.x-spreadsheet-resizer.vertical .x-spreadsheet-resizer-line {
+  border-right: 2px dashed #4b89ff;
+  top: 0;
+  right: 0;
+}
+/* scrollbar */
+.x-spreadsheet-scrollbar {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: #f4f5f8;
+  opacity: 0.9;
+  z-index: 12;
+}
+.x-spreadsheet-scrollbar.horizontal {
+  right: 15px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+.x-spreadsheet-scrollbar.horizontal > div {
+  height: 1px;
+  background: #ddd;
+}
+.x-spreadsheet-scrollbar.vertical {
+  bottom: 15px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.x-spreadsheet-scrollbar.vertical > div {
+  width: 1px;
+  background: #ddd;
+}
+/* @{css-prefix}-overlayer */
+.x-spreadsheet-overlayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+}
+.x-spreadsheet-overlayer .x-spreadsheet-overlayer-content {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+.x-spreadsheet-editor,
+.x-spreadsheet-selector {
+  box-sizing: content-box;
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/* @{css-prefix}-selector */
+.x-spreadsheet-selector .hide-input {
+  position: absolute;
+  z-index: 0;
+}
+.x-spreadsheet-selector .hide-input input {
+  padding: 0;
+  width: 0;
+  border: none!important;
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-area {
+  position: absolute;
+  border: 2px solid #4b89ff;
+  background: rgba(75, 137, 255, 0.1);
+  z-index: 5;
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-clipboard,
+.x-spreadsheet-selector .x-spreadsheet-selector-autofill {
+  position: absolute;
+  background: transparent;
+  z-index: 100;
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-clipboard {
+  border: 2px dashed #4b89ff;
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-autofill {
+  border: 1px dashed rgba(0, 0, 0, 0.45);
+}
+.x-spreadsheet-selector .x-spreadsheet-selector-corner {
+  pointer-events: auto;
+  position: absolute;
+  cursor: crosshair;
+  font-size: 0;
+  height: 5px;
+  width: 5px;
+  right: -5px;
+  bottom: -5px;
+  border: 2px solid #ffffff;
+  background: #4b89ff;
+}
+.x-spreadsheet-editor {
+  z-index: 20;
+}
+.x-spreadsheet-editor .x-spreadsheet-editor-area {
+  position: absolute;
+  text-align: left;
+  border: 2px solid #4b89ff;
+  line-height: 0;
+  z-index: 100;
+  pointer-events: auto;
+}
+.x-spreadsheet-editor .x-spreadsheet-editor-area textarea {
+  box-sizing: content-box;
+  border: none;
+  padding: 0 3px;
+  outline: none;
+  resize: none;
+  text-align: start;
+  overflow-y: hidden;
+  font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica, sans-serif;
+  color: inherit;
+  white-space: normal;
+  word-wrap: break-word;
+  line-height: 22px;
+  margin: 0;
+}
+.x-spreadsheet-editor .x-spreadsheet-editor-area .textline {
+  overflow: hidden;
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.x-spreadsheet-item {
+  user-select: none;
+  background: 0;
+  border: 1px solid transparent;
+  outline: none;
+  height: 26px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 26px;
+  list-style: none;
+  padding: 2px 10px;
+  cursor: default;
+  text-align: left;
+  overflow: hidden;
+}
+.x-spreadsheet-item.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.x-spreadsheet-item:hover,
+.x-spreadsheet-item.active {
+  background: rgba(0, 0, 0, 0.05);
+}
+.x-spreadsheet-item.divider {
+  height: 0;
+  padding: 0;
+  margin: 5px 0;
+  border: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.x-spreadsheet-item .label {
+  float: right;
+  opacity: 0.65;
+  font-size: 1em;
+}
+.x-spreadsheet-item.state,
+.x-spreadsheet-header.state {
+  padding-left: 35px!important;
+  position: relative;
+}
+.x-spreadsheet-item.state:before,
+.x-spreadsheet-header.state:before {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  left: 12px;
+  top: calc(50% - 5px);
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 2px;
+}
+.x-spreadsheet-item.state.checked:before,
+.x-spreadsheet-header.state.checked:before {
+  background: #4b89ff;
+}
+.x-spreadsheet-checkbox {
+  position: relative;
+  display: inline-block;
+  backface-visibility: hidden;
+  outline: 0;
+  vertical-align: baseline;
+  font-style: normal;
+  font-size: 1rem;
+  line-height: 1em;
+}
+.x-spreadsheet-checkbox > input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0!important;
+  outline: 0;
+  z-index: -1;
+}
+.x-spreadsheet-suggest,
+.x-spreadsheet-contextmenu,
+.x-spreadsheet-sort-filter {
+  position: absolute;
+  box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+  background: #fff;
+  z-index: 100;
+  width: 260px;
+  pointer-events: auto;
+  overflow: auto;
+}
+.x-spreadsheet-suggest {
+  width: 200px;
+}
+.x-spreadsheet-filter {
+  border: 1px solid #e9e9e9;
+  font-size: 12px;
+  margin: 10px;
+}
+.x-spreadsheet-filter .x-spreadsheet-header {
+  padding: 0.5em 0.75em;
+  background: #f8f8f9;
+  border-bottom: 1px solid #e9e9e9;
+  border-left: 1px solid transparent;
+}
+.x-spreadsheet-filter .x-spreadsheet-body {
+  height: 200px;
+  overflow-y: auto;
+}
+.x-spreadsheet-filter .x-spreadsheet-body .x-spreadsheet-item {
+  height: 20px;
+  line-height: 20px;
+}
+.x-spreadsheet-sort-filter .x-spreadsheet-buttons {
+  margin: 10px;
+}
+.x-spreadsheet-bottombar {
+  height: 40px;
+  padding: 0 30px;
+  text-align: left;
+  background: #f5f6f7;
+  display: flex;
+}
+.x-spreadsheet-bottombar {
+  position: relative;
+  border-top: 1px solid #e0e2e4;
+}
+.x-spreadsheet-bottombar .x-spreadsheet-menu > li {
+  line-height: 40px;
+  height: 40px;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+  border-right: 1px solid #e8eaed;
+}
+.x-spreadsheet-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+.x-spreadsheet-menu > li {
+  float: left;
+  line-height: 1.25em;
+  padding: 0.785em 1em;
+  margin: 0;
+  vertical-align: middle;
+  text-align: left;
+  font-weight: 400;
+  color: #80868b;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-weight: bold;
+}
+.x-spreadsheet-menu > li.active {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.65);
+}
+.x-spreadsheet-menu > li .x-spreadsheet-dropdown {
+  display: inline-block;
+}
+.x-spreadsheet-print {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.x-spreadsheet-print-bar {
+  background: #424242;
+  height: 60px;
+  line-height: 60px;
+  padding: 0 30px;
+}
+.x-spreadsheet-print-bar .-title {
+  color: #fff;
+  font-weight: bold;
+  font-size: 1.2em;
+  float: left;
+}
+.x-spreadsheet-print-bar .-right {
+  float: right;
+  margin-top: 12px;
+}
+.x-spreadsheet-print-content {
+  display: flex;
+  flex: auto;
+  flex-direction: row;
+  background: #d0d0d0;
+  height: calc(100% - 60px);
+}
+.x-spreadsheet-print-content .-sider {
+  flex: 0 0 300px;
+  width: 300px;
+  border-left: 2px solid #ccc;
+  background: #fff;
+}
+.x-spreadsheet-print-content .-content {
+  flex: auto;
+  overflow-x: auto;
+  overflow-y: scroll;
+  height: 100%;
+}
+.x-spreadsheet-canvas-card-wraper {
+  margin: 40px 20px;
+}
+.x-spreadsheet-canvas-card {
+  background: #fff;
+  margin: auto;
+  page-break-before: auto;
+  page-break-after: always;
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.2);
+}
+.x-spreadsheet-calendar {
+  color: rgba(0, 0, 0, 0.65);
+  background: #ffffff;
+  user-select: none;
+}
+.x-spreadsheet-calendar .calendar-header {
+  font-weight: 700;
+  line-height: 30px;
+  text-align: center;
+  width: 100%;
+  float: left;
+  background: #f9fafb;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-left {
+  padding-left: 5px;
+  float: left;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-right {
+  float: right;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-right a {
+  padding: 3px 0;
+  margin-right: 2px;
+  border-radius: 2px;
+}
+.x-spreadsheet-calendar .calendar-header .calendar-header-right a:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+.x-spreadsheet-calendar .calendar-body {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.x-spreadsheet-calendar .calendar-body th,
+.x-spreadsheet-calendar .calendar-body td {
+  width: 14.28571429%;
+  min-width: 32px;
+  text-align: center;
+  font-weight: 700;
+  line-height: 30px;
+  padding: 0;
+}
+.x-spreadsheet-calendar .calendar-body td > .cell:hover {
+  background: #ecf6fd;
+}
+.x-spreadsheet-calendar .calendar-body td > .cell.active,
+.x-spreadsheet-calendar .calendar-body td > .cell.active:hover {
+  background: #ecf6fd;
+  color: #2185D0;
+}
+.x-spreadsheet-calendar .calendar-body td > .cell.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.x-spreadsheet-datepicker {
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  left: 0;
+  top: calc(100% + 5px);
+  z-index: 10;
+  width: auto;
+}
+.x-spreadsheet-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+.x-spreadsheet-buttons .x-spreadsheet-button {
+  margin-left: 8px;
+}
+.x-spreadsheet-button {
+  display: inline-block;
+  border-radius: 3px;
+  line-height: 1em;
+  min-height: 1em;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: 700;
+  padding: 0.75em 1em;
+  color: rgba(0, 0, 0, 0.6);
+  background: #E0E1E2;
+  text-decoration: none;
+  font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
+  outline: none;
+  vertical-align: baseline;
+  zoom: 1;
+  user-select: none;
+  transition: all 0.1s linear;
+}
+.x-spreadsheet-button.active,
+.x-spreadsheet-button:hover {
+  background-color: #C0C1C2;
+  color: rgba(0, 0, 0, 0.8);
+}
+.x-spreadsheet-button.primary {
+  color: #fff;
+  background-color: #2185D0;
+}
+.x-spreadsheet-button.primary:hover,
+.x-spreadsheet-button.primary.active {
+  color: #fff;
+  background-color: #1678c2;
+}
+.x-spreadsheet-form-input {
+  font-size: 1em;
+  position: relative;
+  font-weight: 400;
+  display: inline-flex;
+  color: rgba(0, 0, 0, 0.87);
+}
+.x-spreadsheet-form-input input {
+  z-index: 1;
+  margin: 0;
+  max-width: 100%;
+  flex: 1 0 auto;
+  outline: 0;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-align: left;
+  line-height: 30px;
+  height: 30px;
+  padding: 0 8px;
+  background: #fff;
+  border: 1px solid #e9e9e9;
+  border-radius: 3px;
+  transition: box-shadow 0.1s ease, border-color 0.1s ease;
+  box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
+}
+.x-spreadsheet-form-input input:focus {
+  border-color: #4b89ff;
+  box-shadow: inset 0 1px 2px rgba(75, 137, 255, 0.2);
+}
+.x-spreadsheet-form-select {
+  position: relative;
+  display: inline-block;
+  background: #fff;
+  border: 1px solid #e9e9e9;
+  border-radius: 2px;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.87);
+  user-select: none;
+  box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.06);
+}
+.x-spreadsheet-form-select .input-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 60px;
+  width: auto;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px;
+}
+.x-spreadsheet-form-fields {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.x-spreadsheet-form-fields .x-spreadsheet-form-field {
+  flex: 0 1 auto;
+}
+.x-spreadsheet-form-fields .x-spreadsheet-form-field .label {
+  display: inline-block;
+  margin: 0 10px 0 0;
+}
+.x-spreadsheet-form-field {
+  display: block;
+  vertical-align: middle;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+.x-spreadsheet-form-field:first-child {
+  margin-left: 0;
+}
+.x-spreadsheet-form-field.error .x-spreadsheet-form-select,
+.x-spreadsheet-form-field.error input {
+  border-color: #f04134;
+}
+.x-spreadsheet-form-field .tip {
+  color: #f04134;
+  font-size: 0.9em;
+}
+.x-spreadsheet-dimmer {
+  display: none;
+  position: absolute;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+  background-color: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  transition: background-color 0.5s linear;
+  user-select: none;
+  z-index: 1000;
+}
+.x-spreadsheet-dimmer.active {
+  display: block;
+  opacity: 1;
+}
+form fieldset {
+  border: none;
+}
+form fieldset label {
+  display: block;
+  margin-bottom: 0.5em;
+  font-size: 1em;
+  color: #666;
+}
+form fieldset select {
+  font-size: 1.1em;
+  width: 100%;
+  background-color: #fff;
+  border: none;
+  border-bottom: 2px solid #ddd;
+  padding: 0.5em 0.85em;
+  border-radius: 2px;
+}
+.x-spreadsheet-modal,
+.x-spreadsheet-toast {
+  font-size: 13px;
+  position: fixed;
+  z-index: 1001;
+  text-align: left;
+  line-height: 1.25em;
+  min-width: 360px;
+  color: rgba(0, 0, 0, 0.87);
+  font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial, sans-serif;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  background-clip: padding-box;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px;
+}
+.x-spreadsheet-toast {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+.x-spreadsheet-modal-header,
+.x-spreadsheet-toast-header {
+  font-weight: 600;
+  background-clip: padding-box;
+  background-color: rgba(255, 255, 255, 0.85);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px 4px 0 0;
+}
+
+.x-spreadsheet-toast-header {
+  color: #F2711C;
+}
+.x-spreadsheet-modal-header {
+  border-bottom: 1px solid #e0e2e4;
+  background: rgba(0, 0, 0, 0.08);
+  font-size: 1.0785em;
+}
+.x-spreadsheet-modal-header,
+.x-spreadsheet-modal-content,
+.x-spreadsheet-toast-header,
+.x-spreadsheet-toast-content {
+  padding: 0.75em 1em;
+}
+
+.x-spreadsheet-menu li:first-child {
+  display: none;
+}
+
+.vue-office-excel {
+  height: 100%;
+}
--- a/core/packages/js-excel/index.d.ts
+++ b/core/packages/js-excel/index.d.ts
@ -0,0 +1,15 @@
+export interface Options {
+    minColLength?: number;
+    showContextmenu?: boolean;
+}
+
+export interface JsExcelPreview {
+    preview: (src: string) => Promise<any>,
+    setOptions: (options: Options) => void,
+    setRequestOptions: (requestOptions?: any) => void,
+    destroy: ()=> void,
+}
+declare const jsPreviewExcel: {
+    init: (container: HTMLElement, options?: Options, requestOptions?: any) => JsExcelPreview;
+};
+export default  jsPreviewExcel;
--- a/core/packages/js-excel/index.js
+++ b/core/packages/js-excel/index.js
@ -0,0 +1,5 @@
+import {init} from './src/main';
+
+export default {
+    init
+};
--- a/core/packages/js-excel/package.json
+++ b/core/packages/js-excel/package.json
@ -0,0 +1,46 @@
+{
+  "name": "@js-preview/excel",
+  "type" :"module",
+  "version": "0.0.1",
+  "description": "",
+  "main": "lib/index.js",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "clean": "rimraf lib",
+    "copyReadme": "cp ../../../README.md README.md",
+    "copyType": "cp index.d.ts lib/index.d.ts",
+    "copyCss": "cp ./index.css ./lib/index.css",
+    "copy": "npm run copyCss && npm run copyType && npm run copyReadme",
+    "build": "npm run clean && rollup --config rollup.config.js && npm run copy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:501351981/vue-office.git"
+  },
+  "keywords": [
+    "vue",
+    "docx",
+    "pdf",
+    "ppt",
+    "excel",
+    "docx-preview",
+    "excel-preview",
+    "pdf-preview"
+  ],
+  "license": "MIT",
+  "author": "微信: _hit757_",
+  "gitHead": "d20568113bec480f6ca72924f6d0c1e3b0f1fe15",
+  "publishConfig": {
+    "access": "public",
+    "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"
+  }
+}
--- a/core/packages/js-excel/rollup.config.js
+++ b/core/packages/js-excel/rollup.config.js
@ -0,0 +1,17 @@
+import { babel } from '@rollup/plugin-babel';
+export default {
+    input: 'index.js',
+    output:[
+        {
+            file: 'lib/index.js',
+            name: 'jsPreviewExcel',
+            format: 'es'
+        },
+        {
+            file: 'lib/index.umd.js',
+            name: 'jsPreviewExcel',
+            format: 'umd'
+        }
+    ],
+    plugins: [babel({ babelHelpers: 'bundled' })]
+};
--- a/core/packages/js-excel/src/main.js
+++ b/core/packages/js-excel/src/main.js
@ -0,0 +1,153 @@
+import Spreadsheet from 'x-data-spreadsheet';
+import {getData, readExcelData, transferExcelToSpreadSheet} from '../../vue-excel/src/excel';
+import {renderImage, clearCache} from '../../vue-excel/src/media';
+import {readOnlyInput} from '../../vue-excel/src/hack';
+import {debounce} from 'lodash';
+class JsExcelPreview {
+    container = null;
+    wrapper = null;
+    wrapperMain = null;
+    options = {};
+    requestOptions = {};
+    mediasSource = [];
+    workbookDataSource = {
+        _worksheets:[]
+    };
+    sheetIndex = 1;
+    ctx = null;
+    xs = null;
+    offset = null;
+    observer = null;
+
+    constructor(container, options={}, requestOptions={}) {
+        this.container = container;
+        this.options = {minColLength: 20, ...options};
+        this.requestOptions = requestOptions;
+        this.createWrapper();
+        this.initSpreadsheet();
+        this.hack();
+    }
+    createWrapper(){
+        this.wrapper = document.createElement('div');
+        this.wrapper.className = 'vue-office-excel';
+        this.wrapperMain = document.createElement('div');
+        this.wrapperMain.className = 'vue-office-excel-main';
+        this.wrapper.appendChild(this.wrapperMain);
+        this.container.appendChild(this.wrapper);
+    }
+    initSpreadsheet(){
+        this.xs = new Spreadsheet(this.wrapperMain, {
+            mode: 'read',
+            showToolbar: false,
+            showContextmenu: this.options.showContextmenu || false,
+            view: {
+                height: () => this.wrapper && this.wrapper.clientHeight || 300,
+                width: () => this.wrapper && this.wrapper.clientWidth || 300,
+            },
+            row: {
+                height: 24,
+                len: 100
+            },
+            col: {
+                len: 26,
+                width: 80,
+                indexWidth: 60,
+                minWidth: 60,
+            },
+            autoFocus: false
+        }).loadData({});
+
+        let that = this;
+
+        let swapFunc = this.xs.bottombar.swapFunc;
+        this.xs.bottombar.swapFunc = function (index) {
+            swapFunc.call(that.xs.bottombar, index);
+            that.sheetIndex = index + 1;
+            setTimeout(()=>{
+                that.xs.reRender();
+                renderImage(that.ctx, that.mediasSource,that.workbookDataSource._worksheets[that.sheetIndex], that.offset);
+            });
+
+        };
+        let clear = this.xs.sheet.editor.clear;
+        this.xs.sheet.editor.clear = function (...args){
+            clear.apply(that.xs.sheet.editor, args);
+            setTimeout(()=>{
+                renderImage(that.ctx, that.mediasSource,that.workbookDataSource._worksheets[that.sheetIndex], that.offset);
+            });
+        };
+        let setOffset = this.xs.sheet.editor.setOffset;
+        this.xs.sheet.editor.setOffset = function (...args){
+            setOffset.apply(that.xs.sheet.editor, args);
+            that.offset = args[0];
+            renderImage(that.ctx, that.mediasSource,that.workbookDataSource._worksheets[that.sheetIndex], that.offset);
+        };
+        const canvas = this.wrapperMain.querySelector('canvas');
+        this.ctx = canvas.getContext('2d');
+    }
+    renderExcel(buffer){
+        return readExcelData(buffer).then(workbook => {
+            if (!workbook._worksheets || workbook._worksheets.length === 0) {
+                throw new Error('未获取到数据，可能文件格式不正确或文件已损坏');
+            }
+            const {workbookData, medias, workbookSource} = transferExcelToSpreadSheet(workbook, this.options);
+            this.mediasSource = medias;
+            this.workbookDataSource = workbookSource;
+            this.offset = null;
+            this.sheetIndex = 1;
+            clearCache();
+            this.xs.loadData(workbookData);
+            renderImage(this.ctx, this.mediasSource,this.workbookDataSource._worksheets[this.sheetIndex], this.offset);
+
+        }).catch(e => {
+            this.mediasSource = [];
+            this.workbookDataSource = {
+                _worksheets:[]
+            };
+            clearCache();
+            this.xs.loadData({});
+            return Promise.reject(e);
+        });
+    }
+    hack(){
+        const observerCallback = debounce(readOnlyInput, 200).bind(this, this.wrapperMain);
+        this.observer = new MutationObserver(observerCallback);
+        const observerConfig = { attributes: true, childList: true, subtree: true };
+        this.observer.observe(this.wrapperMain, observerConfig);
+        observerCallback(this.wrapperMain);
+    }
+
+    setOptions(options) {
+        this.options = options;
+    }
+    setRequestOptions(requestOptions) {
+        this.requestOptions = requestOptions;
+    }
+    preview(src){
+        return new Promise(((resolve, reject) => {
+            getData(src, this.requestOptions).then((res)=>{
+                this.renderExcel(res).then(resolve);
+            }).catch(e => {
+                this.xs.loadData({});
+                reject(e);
+            });
+        }));
+    }
+    destroy(){
+        this.observer.disconnect();
+        this.container.removeChild(this.wrapper);
+        this.container = null;
+        this.wrapper = null;
+        this.wrapperMain = null;
+        this.ctx = null;
+        this.xs = null;
+        this.observer = null;
+        this.options = null;
+        this.requestOptions = null;
+        this.mediasSource = null;
+        this.workbookDataSource = null;
+    }
+}
+export function init(container, options, requestOptions){
+    return new JsExcelPreview(container, options, requestOptions);
+}
--- a/core/packages/js-pdf/.babelrc
+++ b/core/packages/js-pdf/.babelrc
@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}
--- a/core/packages/js-pdf/.npmrc
+++ b/core/packages/js-pdf/.npmrc
--- a/core/packages/js-pdf/index.d.ts
+++ b/core/packages/js-pdf/index.d.ts
@ -0,0 +1,25 @@
+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;
+}
+
+export interface JsPdfPreview {
+    preview: (src: string) => Promise<any>,
+    setOptions: (options: Options) => void,
+    setRequestOptions: (requestOptions?: any) => void,
+    destroy: ()=> void,
+}
+declare const jsPreviewPdf: {
+    init: (container: HTMLElement, options?: Options, requestOptions?: any) => JsPdfPreview;
+};
+export default  jsPreviewPdf;
--- a/core/packages/js-pdf/index.js
+++ b/core/packages/js-pdf/index.js
@ -0,0 +1,5 @@
+import {init} from './src/main';
+
+export default {
+    init
+};
--- a/core/packages/js-pdf/package.json
+++ b/core/packages/js-pdf/package.json
@ -0,0 +1,41 @@
+{
+  "name": "@js-preview/pdf",
+  "type" :"module",
+  "version": "0.0.1",
+  "description": "",
+  "main": "lib/index.js",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "clean": "rimraf lib",
+    "copyReadme": "cp ../../../README.md README.md",
+    "copyType": "cp index.d.ts lib/index.d.ts",
+    "copy": "npm run copyType && npm run copyReadme",
+    "build": "npm run clean && rollup --config rollup.config.js && npm run copy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:501351981/vue-office.git"
+  },
+  "keywords": [
+    "vue",
+    "docx",
+    "pdf",
+    "ppt",
+    "excel",
+    "docx-preview",
+    "excel-preview",
+    "pdf-preview"
+  ],
+  "license": "MIT",
+  "author": "微信: _hit757_",
+  "gitHead": "d20568113bec480f6ca72924f6d0c1e3b0f1fe15",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}
--- a/core/packages/js-pdf/rollup.config.js
+++ b/core/packages/js-pdf/rollup.config.js
@ -0,0 +1,17 @@
+import { babel } from '@rollup/plugin-babel';
+export default {
+    input: 'index.js',
+    output:[
+        {
+            file: 'lib/index.js',
+            name: 'jsPreviewPdf',
+            format: 'es'
+        },
+        {
+            file: 'lib/index.umd.js',
+            name: 'jsPreviewPdf',
+            format: 'umd'
+        }
+    ],
+    plugins: [babel({ babelHelpers: 'bundled' })]
+};
--- a/core/packages/js-pdf/src/main.js
+++ b/core/packages/js-pdf/src/main.js
@ -0,0 +1,160 @@
+import {worker} from '../../vue-pdf/src/worker';
+import {pdfjsLib} from '../../vue-pdf/src/pdf';
+import {getUrl, loadScript} from '../../../utils/url';
+import omit from 'lodash/omit';
+
+const pdfJsLibSrc = `data:text/javascript;base64,${pdfjsLib}`;
+const PdfJsWorkerSrc = `data:text/javascript;base64,${worker}`;
+class JsPdfPreview{
+    container = null;
+    wrapper = null;
+    wrapperMain = null;
+    options = {};
+    requestOptions = {};
+    pdfDocument = null;
+    constructor(container, options={}, requestOptions={}) {
+        this.container = container;
+        this.options = {
+            staticFileUrl: 'https://unpkg.com/pdfjs-dist@3.1.81/',
+            ...options
+        };
+        this.requestOptions = requestOptions;
+        this.createWrapper();
+    }
+    createWrapper(){
+        this.wrapper = document.createElement('div');
+        this.wrapper.className = 'vue-office-pdf';
+        this.wrapper.setAttribute('style', 'text-align: center;overflow-y: auto;');
+        this.container.appendChild(this.wrapper);
+    }
+    createWrapperMain(){
+        this.wrapperMain = document.createElement('div');
+        this.wrapperMain.className = 'vue-office-pdf-wrapper';
+        this.wrapperMain.setAttribute('style', 'background: gray; padding: 30px 0;position: relative;');
+        this.wrapper.appendChild(this.wrapperMain);
+    }
+    createCanvas(){
+        const canvas = document.createElement('canvas');
+        canvas.setAttribute('style', 'width:100%');
+        this.wrapperMain.appendChild(canvas);
+        return [canvas, canvas.getContext('2d')];
+    }
+    installPdfScript() {
+        return loadScript(pdfJsLibSrc).then(() => {
+            window.pdfjsLib.GlobalWorkerOptions.workerSrc = PdfJsWorkerSrc;
+        });
+    }
+    checkPdfLib() {
+        if (window.pdfjsLib) {
+            return Promise.resolve();
+        }
+        return this.installPdfScript();
+    }
+    getDocument(src){
+        const loadingTask = window.pdfjsLib.getDocument({
+            url: getUrl(src),
+            cMapUrl: `${this.options.staticFileUrl.endsWith('/') ? this.options.staticFileUrl : this.options.staticFileUrl + '/'}cmaps/`,
+            cMapPacked: true,
+            enableXfa: true,
+            ...omit(this.options, ['width', 'staticFileUrl'])
+        });
+        return loadingTask.promise;
+    }
+    renderSinglePage(num){
+        return this.pdfDocument.getPage(num).then((pdfPage) => {
+            const viewport = pdfPage.getViewport({scale: 2});
+            const outputScale = window.devicePixelRatio || 1;
+            let [canvas, ctx] = this.createCanvas();
+
+            canvas.width = Math.floor(viewport.width * outputScale);
+            canvas.height = Math.floor(viewport.height * outputScale);
+
+            let domWidth = Math.floor(viewport.width);
+            let domHeight = Math.floor(viewport.height);
+            if (this.options.width) {
+                let scale = this.options.width / domWidth;
+                domWidth = Math.floor(this.options.width);
+                domHeight = Math.floor(domHeight * scale);
+            }
+            if(domWidth > document.documentElement.clientWidth){
+                let scale = document.documentElement.clientWidth / domWidth;
+                domWidth = Math.floor(document.documentElement.clientWidth);
+                domHeight = Math.floor(domHeight * scale);
+            }
+
+            canvas.style.width = domWidth + 'px';
+            canvas.style.height = domHeight + 'px';
+
+            const transform = outputScale !== 1
+                ? [outputScale, 0, 0, outputScale, 0, 0]
+                : null;
+
+            const renderTask = pdfPage.render({
+                canvasContext: ctx,
+                transform,
+                viewport
+            });
+            return renderTask.promise.then(() => {
+                if (this.pdfDocument.numPages > num) {
+                    this.renderSinglePage(num + 1);
+                }
+            });
+        });
+    }
+    renderPage(){
+        if(!this.wrapperMain){
+            this.createWrapperMain();
+        }
+        return this.renderSinglePage(1);
+    }
+    clearAllCanvas(){
+        if(this.wrapperMain){
+            this.wrapper.removeChild(this.wrapperMain);
+            this.wrapperMain = null;
+        }
+    }
+    setOptions(options) {
+        this.options = options;
+    }
+    setRequestOptions(requestOptions) {
+        this.requestOptions = requestOptions;
+    }
+    preview(src){
+        return new Promise(((resolve, reject) => {
+            if(!src){
+                this.clearAllCanvas();
+                reject(new Error('预览地址不能为空'));
+                return;
+            }
+            this.checkPdfLib().then(_=>{
+                this.getDocument(src).then(pdf=>{
+                    this.pdfDocument = pdf;
+                    this.renderPage().then(_=>{
+                        resolve();
+                    }).catch(e=>{
+                        this.clearAllCanvas();
+                        reject(e);
+                    });
+                }).catch(e=>{
+                    this.clearAllCanvas();
+                    reject(e);
+                });
+            }).catch(e=>{
+                this.clearAllCanvas();
+                reject(e);
+            });
+        }));
+    }
+    destroy(){
+        this.container.removeChild(this.wrapper);
+        this.container = null;
+        this.wrapper = null;
+        this.wrapperMain = null;
+        this.options = {};
+        this.requestOptions = {};
+        this.pdfDocument = null;
+    }
+}
+export function init(container, options, requestOptions){
+    return new JsPdfPreview(container, options, requestOptions);
+}
--- a/core/packages/vue-docx/.npmrc
+++ b/core/packages/vue-docx/.npmrc
@ -0,0 +1 @@
+registry=https://registry.npmjs.org
--- a/core/packages/vue-docx/index.d.ts
+++ b/core/packages/vue-docx/index.d.ts
--- a/core/packages/vue-docx/index.js
+++ b/core/packages/vue-docx/index.js
--- a/core/packages/vue-docx/package.json
+++ b/core/packages/vue-docx/package.json
--- a/core/packages/vue-docx/src/docx.js
+++ b/core/packages/vue-docx/src/docx.js
--- a/core/packages/vue-docx/src/main.vue
+++ b/core/packages/vue-docx/src/main.vue
--- a/core/packages/vue-docx/vite.config.js
+++ b/core/packages/vue-docx/vite.config.js
--- a/core/packages/vue-excel/.npmrc
+++ b/core/packages/vue-excel/.npmrc
@ -0,0 +1 @@
+registry=https://registry.npmjs.org
--- a/core/packages/vue-excel/index.d.ts
+++ b/core/packages/vue-excel/index.d.ts
--- a/core/packages/vue-excel/index.js
+++ b/core/packages/vue-excel/index.js
--- a/core/packages/vue-excel/package.json
+++ b/core/packages/vue-excel/package.json
--- a/core/packages/vue-excel/src/color.js
+++ b/core/packages/vue-excel/src/color.js
--- a/core/packages/vue-excel/src/excel.js
+++ b/core/packages/vue-excel/src/excel.js
--- a/core/packages/vue-excel/src/hack.js
+++ b/core/packages/vue-excel/src/hack.js
@ -1,5 +1,4 @@
-export function readOnlyInput(ref){
-    let root = ref.value;
+export function readOnlyInput(root){
    if(root){
        let nodes = root.querySelectorAll('input');
        for(let node of nodes){
--- a/core/packages/vue-excel/src/index.css
+++ b/core/packages/vue-excel/src/index.css
--- a/core/packages/vue-excel/src/main.vue
+++ b/core/packages/vue-excel/src/main.vue
@ -61,7 +61,7 @@ export default defineComponent({
                emit('error', e);
            });
        }
-        const observerCallback = debounce(readOnlyInput, 200).bind(this,rootRef);
+        const observerCallback = debounce(readOnlyInput, 200).bind(this,rootRef.value);
        const observer = new MutationObserver(observerCallback);
        const observerConfig = { attributes: true, childList: true, subtree: true };
        
--- a/core/packages/vue-excel/src/media.js
+++ b/core/packages/vue-excel/src/media.js
--- a/core/packages/vue-excel/vite.config.js
+++ b/core/packages/vue-excel/vite.config.js
--- a/core/packages/vue-pdf/.npmrc
+++ b/core/packages/vue-pdf/.npmrc
@ -0,0 +1 @@
+registry=https://registry.npmjs.org
--- a/core/packages/vue-pdf/index.d.ts
+++ b/core/packages/vue-pdf/index.d.ts
--- a/core/packages/vue-pdf/index.js
+++ b/core/packages/vue-pdf/index.js
--- a/core/packages/vue-pdf/package.json
+++ b/core/packages/vue-pdf/package.json
--- a/core/packages/vue-pdf/src/main.vue
+++ b/core/packages/vue-pdf/src/main.vue
--- a/core/packages/vue-pdf/src/pdf.js
+++ b/core/packages/vue-pdf/src/pdf.js
--- a/core/packages/vue-pdf/src/worker.js
+++ b/core/packages/vue-pdf/src/worker.js
--- a/core/packages/vue-pdf/vite.config.js
+++ b/core/packages/vue-pdf/vite.config.js
--- a/core/public/static/test-files/test2.docx
+++ b/core/public/static/test-files/test2.docx
--- a/core/src/components/DocxDemo.vue
+++ b/core/src/components/DocxDemo.vue
@ -1,5 +1,5 @@
 <script setup>
-import VueOfficeDocx from '../../packages/docx/index';
+import VueOfficeDocx from '../../packages/vue-docx/index';
 import PreviewWrapper from '../common/PreviewWrapper.vue';
 import useLoading from '../hooks/useLoading.js';
 function onRendered(){
--- a/core/src/components/ExcelDemo.vue
+++ b/core/src/components/ExcelDemo.vue
@ -1,6 +1,6 @@
 <script setup>
-import VueOfficeExcel from '../../packages/excel/index';
-import '../../packages/excel/src/index.css';
+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';
 function onRendered(){
--- a/core/src/components/JsDocxDemo.vue
+++ b/core/src/components/JsDocxDemo.vue
@ -0,0 +1,28 @@
+<template>
+<div ref="dom">
+    
+</div>
+</template>
+
+<script setup>
+import {onMounted, ref} from 'vue';
+import jsDocx from '../../packages/js-docx/index';
+import '../../packages/js-docx/index.css';
+const dom = ref(null);
+onMounted(() => {
+    let myDocxPreview = jsDocx.init(dom.value);
+    myDocxPreview.preview('/vue-office/examples/dist/static/test-files/test.docx').then(_=>{
+        console.log('docx preview done');
+        setTimeout(()=>{
+            myDocxPreview.preview('/vue-office/examples/dist/static/test-files/test2.docx');
+        }, 3000);
+    }).catch(err=>{
+        console.log('err',err);
+    });
+});
+
+</script>
+
+<style scoped>
+
+</style>
--- a/core/src/components/JsExcelDemo.vue
+++ b/core/src/components/JsExcelDemo.vue
@ -0,0 +1,26 @@
+<template>
+<div ref="dom" style="height: calc(100vh - 50px)">
+    
+</div>
+</template>
+
+<script setup>
+import {onMounted, ref} from 'vue';
+import jsExcel from '../../packages/js-excel/index';
+import '../../packages/js-excel/index.css';
+const dom = ref(null);
+onMounted(() => {
+    window.myExcelPreview = jsExcel.init(dom.value);
+    window.myExcelPreview.preview('/vue-office/examples/dist/static/test-files/test.xlsx').then(_=>{
+        console.log('excel preview done', window.myExcelPreview);
+    }).catch(err=>{
+        console.log('err',err);
+    });
+
+});
+
+</script>
+
+<style scoped>
+
+</style>
--- a/core/src/components/JsPdfDemo.vue
+++ b/core/src/components/JsPdfDemo.vue
@ -0,0 +1,26 @@
+<template>
+<div ref="dom" style="height: calc(100vh - 50px)">
+    
+</div>
+</template>
+
+<script setup>
+import {onMounted, ref} from 'vue';
+import jsPdf from '../../packages/js-pdf/index';
+import '../../packages/js-excel/index.css';
+const dom = ref(null);
+onMounted(() => {
+    window.myPdfPreview = jsPdf.init(dom.value);
+    window.myPdfPreview.preview('/vue-office/examples/dist/static/test-files/test.pdf').then(_=>{
+        console.log('excel preview done', window.myPdfPreview);
+    }).catch(err=>{
+        console.log('err',err);
+    });
+
+});
+
+</script>
+
+<style scoped>
+
+</style>
--- a/core/src/components/PdfDemo.vue
+++ b/core/src/components/PdfDemo.vue
@ -1,5 +1,5 @@
 <script setup>
-import VueOfficePdf from '../../packages/pdf/index';
+import VueOfficePdf from '../../packages/vue-pdf/index';
 import PreviewWrapper from '../common/PreviewWrapper.vue';
 import useLoading from '../hooks/useLoading.js';
 function onRendered(){
--- a/core/src/router.js
+++ b/core/src/router.js
@ -4,6 +4,9 @@ const routes = [
    { path: '/docx', component: ()=> import('./components/DocxDemo.vue') },
    { path: '/excel', component: ()=> import('./components/ExcelDemo.vue') },
    { path: '/pdf', component: ()=> import('./components/PdfDemo.vue') },
+    { path: '/js-docx', component: ()=> import('./components/JsDocxDemo.vue') },
+    { path: '/js-excel', component: ()=> import('./components/JsExcelDemo.vue') },
+    { path: '/js-pdf', component: ()=> import('./components/JsPdfDemo.vue') },
 ];

 export default createRouter({
--- a/examples/dist/assets/DocxDemo-9a59488f.css
+++ b/examples/dist/assets/DocxDemo-9a59488f.css
@ -0,0 +1 @@
+.vue-office-docx{height:100%;overflow-y:auto}.vue-office-docx .docx-wrapper>section.docx{margin-bottom:5px}@media screen and (max-width: 800px){.vue-office-docx .docx-wrapper{padding:10px}.vue-office-docx .docx-wrapper>section.docx{padding:10px!important;width:100%!important}}.operate-area[data-v-4ca3fc9b]{display:flex;margin:10px;align-items:center}
--- a/examples/dist/assets/DocxDemo-c37510e5.js
+++ b/examples/dist/assets/DocxDemo-c37510e5.js
--- a/examples/dist/assets/DocxDemo-cc40b51c.js
+++ b/examples/dist/assets/DocxDemo-cc40b51c.js
@ -0,0 +1 @@
+import{d as a}from"./docx-0c8fb292.js";import{d as l,_ as f,r as u,o as p,w as m,a as _,c as x,b as h,e as v,f as g,g as D,u as y}from"./index-893deb04.js";import{P as b,u as d}from"./PreviewWrapper-6c12c361.js";import"./_commonjs-dynamic-modules-302442b1.js";const B=l({name:"VueOfficeDocx",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({})}},emits:["rendered","error"],setup(e,{emit:o}){const n=u(null);function c(){let t=n.value;a.getData(e.src,e.requestOptions).then(r=>{a.render(r,t,e.options).then(()=>{o("rendered")}).catch(i=>{a.render("",t,e.options),o("error",i)})}).catch(r=>{a.render("",t,e.options),o("error",r)})}return p(()=>{e.src&&c()}),m(()=>e.src,()=>{e.src?c():a.render("",n.value,e.options).then(()=>{o("rendered")})}),{rootRef:n}}}),O={class:"vue-office-docx"},$={class:"vue-office-docx-main",ref:"rootRef"};function w(e,o,n,c,t,r){return _(),x("div",O,[h("div",$,null,512)])}const s=f(B,[["render",w]]);s.install=function(e){e.component(s.name,s)};const R={__name:"DocxDemo",setup(e){function o(){d.hideLoading()}function n(t){console.log("出差",t),d.hideLoading()}const c=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.docx";return(t,r)=>(_(),v(b,{accept:".docx",placeholder:"请输入docx文件地址","default-src":c},{default:g(i=>[D(y(s),{src:i.src,style:{flex:"1",height:"0"},onRendered:o,onError:n},null,8,["src"])]),_:1}))}},j=f(R,[["__scopeId","data-v-4ca3fc9b"]]);export{j as default};
--- a/examples/dist/assets/ExcelDemo-2978cbce.js
+++ b/examples/dist/assets/ExcelDemo-2978cbce.js
--- a/examples/dist/assets/ExcelDemo-6e92ae1e.js
+++ b/examples/dist/assets/ExcelDemo-6e92ae1e.js
--- a/examples/dist/assets/JsDocxDemo-ccc76636.js
+++ b/examples/dist/assets/JsDocxDemo-ccc76636.js
@ -0,0 +1 @@
+var a=Object.defineProperty;var p=(s,e,t)=>e in s?a(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>(p(s,typeof e!="symbol"?e+"":e,t),t);import{d as n}from"./docx-0c8fb292.js";import{r as l,o as u,a as h,c as d}from"./index-893deb04.js";import"./_commonjs-dynamic-modules-302442b1.js";class m{constructor(e,t={},o={}){i(this,"container",null);i(this,"options",{});i(this,"requestOptions",{});this.container=e,this.options=t,this.requestOptions=o}setOptions(e){this.options=e}setRequestOptions(e){this.requestOptions=e}preview(e){return new Promise((t,o)=>{n.getData(e,this.requestOptions).then(r=>{n.render(r,this.container,this.options).then(()=>{t()}).catch(c=>{n.render("",this.container,this.options),o(c)})}).catch(r=>{n.render("",this.container,this.options),o(r)})})}}function f(s,e,t){return new m(s,e,t)}const x={init:f},O={__name:"JsDocxDemo",setup(s){const e=l(null);return u(()=>{let t=x.init(e.value);t.preview("/vue-office/examples/dist/static/test-files/test.docx").then(o=>{console.log("docx preview done"),setTimeout(()=>{t.preview("/vue-office/examples/dist/static/test-files/test2.docx")},3e3)}).catch(o=>{console.log("err",o)})}),(t,o)=>(h(),d("div",{ref_key:"dom",ref:e},null,512))}};export{O as default};
--- a/examples/dist/assets/PdfDemo-14d873ca.js
+++ b/examples/dist/assets/PdfDemo-14d873ca.js
--- a/examples/dist/assets/PdfDemo-a2c86166.js
+++ b/examples/dist/assets/PdfDemo-a2c86166.js
--- a/examples/dist/assets/PreviewWrapper-6c12c361.js
+++ b/examples/dist/assets/PreviewWrapper-6c12c361.js
@ -0,0 +1 @@
+import{r as d,q as C,_ as I,w as N,s as n,a as p,c as x,u as t,g as i,f as l,t as v,v as S,e as w,p as m,x as V,y as W,z as A,b as R}from"./index-893deb04.js";function T(e){const s=d("url"),a=d(e),r=d(e),u=d([]);function b(y){let c=new FileReader;return c.onload=o=>{let _=o.target.result;r.value=_},c.readAsArrayBuffer(y),!1}return{type:s,inputSrc:a,src:r,fileList:u,beforeUpload:b}}let g=d(!1),k;function $(e){k=C.loading(e,0),g.value=!0}function q(){g.value===!0&&(k(),g.value=!1)}const z={loading:g,showLoading:$,hideLoading:q};function E(){return location.href.includes("test")}const F=e=>(W("data-v-6e0b6946"),e=e(),A(),e),j={class:"preview-wrapper"},D={key:0,class:"operate-area"},G=F(()=>R("div",{class:"preview-wrapper-main"},null,-1)),H={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const s=e,{type:a,inputSrc:r,src:u,fileList:b,beforeUpload:y}=T(s.defaultSrc);return N(u,()=>{z.showLoading()},{immediate:!0}),(c,o)=>{const _=n("a-radio-button"),B=n("a-radio-group"),L=n("a-input"),h=n("a-button"),U=n("upload-outlined"),P=n("a-upload");return p(),x("div",j,[t(E)()?m("",!0):(p(),x("div",D,[i(B,{value:t(a),"onUpdate:value":o[0]||(o[0]=f=>S(a)?a.value=f:null),"button-style":"solid"},{default:l(()=>[i(_,{value:"url"},{default:l(()=>[v("远程文件地址")]),_:1}),i(_,{value:"upload"},{default:l(()=>[v("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(p(),w(L,{key:0,value:t(r),"onUpdate:value":o[1]||(o[1]=f=>S(r)?r.value=f:null),placeholder:s.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):m("",!0),t(a)==="url"?(p(),w(h,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:o[2]||(o[2]=f=>u.value=t(r))},{default:l(()=>[v(" 预览 ")]),_:1})):m("",!0),t(a)!=="url"?(p(),w(P,{key:2,accept:s.accept,action:"",beforeUpload:t(y),"file-list":[]},{default:l(()=>[i(h,{style:{"margin-left":"10px"}},{default:l(()=>[i(U),v(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):m("",!0)])),V(c.$slots,"default",{src:t(u)},void 0,!0),G])}}},K=I(H,[["__scopeId","data-v-6e0b6946"]]);export{K as P,z as u};
--- a/examples/dist/assets/PreviewWrapper-f4e9af1c.js
+++ b/examples/dist/assets/PreviewWrapper-f4e9af1c.js
@ -0,0 +1 @@
+import{r as d,p as C,_ as I,w as N,q as n,a as p,b as x,u as t,h as i,g as l,s as v,t as S,f as w,n as m,v as V,x as W,y as A,e as R}from"./index-14c17763.js";function T(e){const s=d("url"),a=d(e),r=d(e),u=d([]);function b(y){let c=new FileReader;return c.onload=o=>{let _=o.target.result;r.value=_},c.readAsArrayBuffer(y),!1}return{type:s,inputSrc:a,src:r,fileList:u,beforeUpload:b}}let g=d(!1),k;function $(e){k=C.loading(e,0),g.value=!0}function q(){g.value===!0&&(k(),g.value=!1)}const E={loading:g,showLoading:$,hideLoading:q};function F(){return location.href.includes("test")}const j=e=>(W("data-v-6e0b6946"),e=e(),A(),e),z={class:"preview-wrapper"},D={key:0,class:"operate-area"},G=j(()=>R("div",{class:"preview-wrapper-main"},null,-1)),H={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const s=e,{type:a,inputSrc:r,src:u,fileList:b,beforeUpload:y}=T(s.defaultSrc);return N(u,()=>{E.showLoading()},{immediate:!0}),(c,o)=>{const _=n("a-radio-button"),B=n("a-radio-group"),L=n("a-input"),h=n("a-button"),U=n("upload-outlined"),P=n("a-upload");return p(),x("div",z,[t(F)()?m("",!0):(p(),x("div",D,[i(B,{value:t(a),"onUpdate:value":o[0]||(o[0]=f=>S(a)?a.value=f:null),"button-style":"solid"},{default:l(()=>[i(_,{value:"url"},{default:l(()=>[v("远程文件地址")]),_:1}),i(_,{value:"upload"},{default:l(()=>[v("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(p(),w(L,{key:0,value:t(r),"onUpdate:value":o[1]||(o[1]=f=>S(r)?r.value=f:null),placeholder:s.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):m("",!0),t(a)==="url"?(p(),w(h,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:o[2]||(o[2]=f=>u.value=t(r))},{default:l(()=>[v(" 预览 ")]),_:1})):m("",!0),t(a)!=="url"?(p(),w(P,{key:2,accept:s.accept,action:"",beforeUpload:t(y),"file-list":[]},{default:l(()=>[i(h,{style:{"margin-left":"10px"}},{default:l(()=>[i(U),v(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):m("",!0)])),V(c.$slots,"default",{src:t(u)},void 0,!0),G])}}},K=I(H,[["__scopeId","data-v-6e0b6946"]]);export{K as P,E as u};
--- a/examples/dist/assets/docx-0c8fb292.js
+++ b/examples/dist/assets/docx-0c8fb292.js
--- a/examples/dist/assets/index-14c17763.js
+++ b/examples/dist/assets/index-14c17763.js
--- a/examples/dist/assets/index-893deb04.js
+++ b/examples/dist/assets/index-893deb04.js
--- a/examples/dist/index.html
+++ b/examples/dist/index.html
@ -7,7 +7,7 @@
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>@vue-office演示demo</title>
-    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-cfab8763.js"></script>
+    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-893deb04.js"></script>
    <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-cc8fb346.css">
  </head>
  <body>
--- a/examples/dist/static/test-files/test2.docx
+++ b/examples/dist/static/test-files/test2.docx
				`@ -0,0 +1 @@`
				`.vue-office-docx{height:100%;overflow-y:auto}.vue-office-docx .docx-wrapper>section.docx{margin-bottom:5px}@media screen and (max-width: 800px){.vue-office-docx .docx-wrapper{padding:10px}.vue-office-docx .docx-wrapper>section.docx{padding:10px!important;width:100%!important}}`
				`@ -0,0 +1 @@`
				import{d as a}from"./docx-0c8fb292.js";import{d as l,_ as f,r as u,o as p,w as m,a as _,c as x,b as h,e as v,f as g,g as D,u as y}from"./index-893deb04.js";import{P as b,u as d}from"./PreviewWrapper-6c12c361.js";import"./_commonjs-dynamic-modules-302442b1.js";const B=l({name:"VueOfficeDocx",props:{src:[String,ArrayBuffer,Blob],requestOptions:{type:Object,default:()=>({})},options:{type:Object,default:()=>({})}},emits:["rendered","error"],setup(e,{emit:o}){const n=u(null);function c(){let t=n.value;a.getData(e.src,e.requestOptions).then(r=>{a.render(r,t,e.options).then(()=>{o("rendered")}).catch(i=>{a.render("",t,e.options),o("error",i)})}).catch(r=>{a.render("",t,e.options),o("error",r)})}return p(()=>{e.src&&c()}),m(()=>e.src,()=>{e.src?c():a.render("",n.value,e.options).then(()=>{o("rendered")})}),{rootRef:n}}}),O={class:"vue-office-docx"},$={class:"vue-office-docx-main",ref:"rootRef"};function w(e,o,n,c,t,r){return _(),x("div",O,[h("div",$,null,512)])}const s=f(B,[["render",w]]);s.install=function(e){e.component(s.name,s)};const R={__name:"DocxDemo",setup(e){function o(){d.hideLoading()}function n(t){console.log("出差",t),d.hideLoading()}const c=location.origin+(location.pathname+"/").replace("//","/")+"static/test-files/test.docx";return(t,r)=>(_(),v(b,{accept:".docx",placeholder:"请输入docx文件地址","default-src":c},{default:g(i=>[D(y(s),{src:i.src,style:{flex:"1",height:"0"},onRendered:o,onError:n},null,8,["src"])]),_:1}))}},j=f(R,[["__scopeId","data-v-4ca3fc9b"]]);export{j as default};
				`@ -0,0 +1 @@`
				var a=Object.defineProperty;var p=(s,e,t)=>e in s?a(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>(p(s,typeof e!="symbol"?e+"":e,t),t);import{d as n}from"./docx-0c8fb292.js";import{r as l,o as u,a as h,c as d}from"./index-893deb04.js";import"./_commonjs-dynamic-modules-302442b1.js";class m{constructor(e,t={},o={}){i(this,"container",null);i(this,"options",{});i(this,"requestOptions",{});this.container=e,this.options=t,this.requestOptions=o}setOptions(e){this.options=e}setRequestOptions(e){this.requestOptions=e}preview(e){return new Promise((t,o)=>{n.getData(e,this.requestOptions).then(r=>{n.render(r,this.container,this.options).then(()=>{t()}).catch(c=>{n.render("",this.container,this.options),o(c)})}).catch(r=>{n.render("",this.container,this.options),o(r)})})}}function f(s,e,t){return new m(s,e,t)}const x={init:f},O={__name:"JsDocxDemo",setup(s){const e=l(null);return u(()=>{let t=x.init(e.value);t.preview("/vue-office/examples/dist/static/test-files/test.docx").then(o=>{console.log("docx preview done"),setTimeout(()=>{t.preview("/vue-office/examples/dist/static/test-files/test2.docx")},3e3)}).catch(o=>{console.log("err",o)})}),(t,o)=>(h(),d("div",{ref_key:"dom",ref:e},null,512))}};export{O as default};
				`@ -0,0 +1 @@`
				import{r as d,q as C,_ as I,w as N,s as n,a as p,c as x,u as t,g as i,f as l,t as v,v as S,e as w,p as m,x as V,y as W,z as A,b as R}from"./index-893deb04.js";function T(e){const s=d("url"),a=d(e),r=d(e),u=d([]);function b(y){let c=new FileReader;return c.onload=o=>{let _=o.target.result;r.value=_},c.readAsArrayBuffer(y),!1}return{type:s,inputSrc:a,src:r,fileList:u,beforeUpload:b}}let g=d(!1),k;function $(e){k=C.loading(e,0),g.value=!0}function q(){g.value===!0&&(k(),g.value=!1)}const z={loading:g,showLoading:$,hideLoading:q};function E(){return location.href.includes("test")}const F=e=>(W("data-v-6e0b6946"),e=e(),A(),e),j={class:"preview-wrapper"},D={key:0,class:"operate-area"},G=F(()=>R("div",{class:"preview-wrapper-main"},null,-1)),H={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const s=e,{type:a,inputSrc:r,src:u,fileList:b,beforeUpload:y}=T(s.defaultSrc);return N(u,()=>{z.showLoading()},{immediate:!0}),(c,o)=>{const _=n("a-radio-button"),B=n("a-radio-group"),L=n("a-input"),h=n("a-button"),U=n("upload-outlined"),P=n("a-upload");return p(),x("div",j,[t(E)()?m("",!0):(p(),x("div",D,[i(B,{value:t(a),"onUpdate:value":o[0]\|\|(o[0]=f=>S(a)?a.value=f:null),"button-style":"solid"},{default:l(()=>[i(_,{value:"url"},{default:l(()=>[v("远程文件地址")]),_:1}),i(_,{value:"upload"},{default:l(()=>[v("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(p(),w(L,{key:0,value:t(r),"onUpdate:value":o[1]\|\|(o[1]=f=>S(r)?r.value=f:null),placeholder:s.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):m("",!0),t(a)==="url"?(p(),w(h,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:o[2]\|\|(o[2]=f=>u.value=t(r))},{default:l(()=>[v(" 预览 ")]),_:1})):m("",!0),t(a)!=="url"?(p(),w(P,{key:2,accept:s.accept,action:"",beforeUpload:t(y),"file-list":[]},{default:l(()=>[i(h,{style:{"margin-left":"10px"}},{default:l(()=>[i(U),v(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):m("",!0)])),V(c.$slots,"default",{src:t(u)},void 0,!0),G])}}},K=I(H,[["__scopeId","data-v-6e0b6946"]]);export{K as P,z as u};
				`@ -0,0 +1 @@`
				import{r as d,p as C,_ as I,w as N,q as n,a as p,b as x,u as t,h as i,g as l,s as v,t as S,f as w,n as m,v as V,x as W,y as A,e as R}from"./index-14c17763.js";function T(e){const s=d("url"),a=d(e),r=d(e),u=d([]);function b(y){let c=new FileReader;return c.onload=o=>{let _=o.target.result;r.value=_},c.readAsArrayBuffer(y),!1}return{type:s,inputSrc:a,src:r,fileList:u,beforeUpload:b}}let g=d(!1),k;function $(e){k=C.loading(e,0),g.value=!0}function q(){g.value===!0&&(k(),g.value=!1)}const E={loading:g,showLoading:$,hideLoading:q};function F(){return location.href.includes("test")}const j=e=>(W("data-v-6e0b6946"),e=e(),A(),e),z={class:"preview-wrapper"},D={key:0,class:"operate-area"},G=j(()=>R("div",{class:"preview-wrapper-main"},null,-1)),H={__name:"PreviewWrapper",props:{accept:String,placeholder:String,defaultSrc:String},setup(e){const s=e,{type:a,inputSrc:r,src:u,fileList:b,beforeUpload:y}=T(s.defaultSrc);return N(u,()=>{E.showLoading()},{immediate:!0}),(c,o)=>{const _=n("a-radio-button"),B=n("a-radio-group"),L=n("a-input"),h=n("a-button"),U=n("upload-outlined"),P=n("a-upload");return p(),x("div",z,[t(F)()?m("",!0):(p(),x("div",D,[i(B,{value:t(a),"onUpdate:value":o[0]\|\|(o[0]=f=>S(a)?a.value=f:null),"button-style":"solid"},{default:l(()=>[i(_,{value:"url"},{default:l(()=>[v("远程文件地址")]),_:1}),i(_,{value:"upload"},{default:l(()=>[v("上传本地文件")]),_:1})]),_:1},8,["value"]),t(a)==="url"?(p(),w(L,{key:0,value:t(r),"onUpdate:value":o[1]\|\|(o[1]=f=>S(r)?r.value=f:null),placeholder:s.placeholder,style:{width:"600px","margin-left":"10px"}},null,8,["value","placeholder"])):m("",!0),t(a)==="url"?(p(),w(h,{key:1,type:"primary",style:{"margin-left":"10px"},onClick:o[2]\|\|(o[2]=f=>u.value=t(r))},{default:l(()=>[v(" 预览 ")]),_:1})):m("",!0),t(a)!=="url"?(p(),w(P,{key:2,accept:s.accept,action:"",beforeUpload:t(y),"file-list":[]},{default:l(()=>[i(h,{style:{"margin-left":"10px"}},{default:l(()=>[i(U),v(" 选择文件 ")]),_:1})]),_:1},8,["accept","beforeUpload"])):m("",!0)])),V(c.$slots,"default",{src:t(u)},void 0,!0),G])}}},K=I(H,[["__scopeId","data-v-6e0b6946"]]);export{K as P,E as u};