mirror of
https://github.com/501351981/vue-office.git
synced 2025-07-25 07:41:42 +08:00
增加通过纯js方式进行预览
This commit is contained in:
liyulin
parent
dbdf086ff6
commit
6c239dd771
@ -5,9 +5,11 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "node script/bak-vue.js && vite",
|
"dev": "node script/bak-vue.js && vite",
|
||||||
"build": "node script/bak-vue.js && vite build",
|
"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 "
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@babel/preset-env": "^7.22.5",
|
||||||
|
"@rollup/plugin-babel": "^6.0.3",
|
||||||
"@vue/compiler-sfc": "3.2.45",
|
"@vue/compiler-sfc": "3.2.45",
|
||||||
"ant-design-vue": "^3.2.17",
|
"ant-design-vue": "^3.2.17",
|
||||||
"dayjs": "^1.11.7",
|
"dayjs": "^1.11.7",
|
||||||
@ -15,6 +17,7 @@
|
|||||||
"exceljs": "^4.3.0",
|
"exceljs": "^4.3.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"rimraf": "^4.1.2",
|
"rimraf": "^4.1.2",
|
||||||
|
"rollup": "^3.26.0",
|
||||||
"tinycolor2": "^1.6.0",
|
"tinycolor2": "^1.6.0",
|
||||||
"vue-demi": "^0.13.11",
|
"vue-demi": "^0.13.11",
|
||||||
"x-data-spreadsheet": "^1.1.9"
|
"x-data-spreadsheet": "^1.1.9"
|
||||||
|
|||||||
10
core/packages/js-docx/.babelrc
Normal file
10
core/packages/js-docx/.babelrc
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
[
|
||||||
|
"@babel/preset-env",
|
||||||
|
{
|
||||||
|
"modules": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
1
core/packages/js-docx/index.css
Normal file
1
core/packages/js-docx/index.css
Normal file
@ -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}}
|
||||||
30
core/packages/js-docx/index.d.ts
vendored
Normal file
30
core/packages/js-docx/index.d.ts
vendored
Normal file
@ -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;
|
||||||
5
core/packages/js-docx/index.js
Normal file
5
core/packages/js-docx/index.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import {init} from './src/main';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
init
|
||||||
|
};
|
||||||
42
core/packages/js-docx/package.json
Normal file
42
core/packages/js-docx/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
17
core/packages/js-docx/rollup.config.js
Normal file
17
core/packages/js-docx/rollup.config.js
Normal file
@ -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' })]
|
||||||
|
};
|
||||||
56
core/packages/js-docx/src/main.js
Normal file
56
core/packages/js-docx/src/main.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
10
core/packages/js-excel/.babelrc
Normal file
10
core/packages/js-excel/.babelrc
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
[
|
||||||
|
"@babel/preset-env",
|
||||||
|
{
|
||||||
|
"modules": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
762
core/packages/js-excel/index.css
Normal file
762
core/packages/js-excel/index.css
Normal file
@ -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%;
|
||||||
|
}
|
||||||
15
core/packages/js-excel/index.d.ts
vendored
Normal file
15
core/packages/js-excel/index.d.ts
vendored
Normal file
@ -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;
|
||||||
5
core/packages/js-excel/index.js
Normal file
5
core/packages/js-excel/index.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import {init} from './src/main';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
init
|
||||||
|
};
|
||||||
46
core/packages/js-excel/package.json
Normal file
46
core/packages/js-excel/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
17
core/packages/js-excel/rollup.config.js
Normal file
17
core/packages/js-excel/rollup.config.js
Normal file
@ -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' })]
|
||||||
|
};
|
||||||
153
core/packages/js-excel/src/main.js
Normal file
153
core/packages/js-excel/src/main.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
10
core/packages/js-pdf/.babelrc
Normal file
10
core/packages/js-pdf/.babelrc
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
[
|
||||||
|
"@babel/preset-env",
|
||||||
|
{
|
||||||
|
"modules": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
25
core/packages/js-pdf/index.d.ts
vendored
Normal file
25
core/packages/js-pdf/index.d.ts
vendored
Normal file
@ -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;
|
||||||
5
core/packages/js-pdf/index.js
Normal file
5
core/packages/js-pdf/index.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import {init} from './src/main';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
init
|
||||||
|
};
|
||||||
41
core/packages/js-pdf/package.json
Normal file
41
core/packages/js-pdf/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
17
core/packages/js-pdf/rollup.config.js
Normal file
17
core/packages/js-pdf/rollup.config.js
Normal file
@ -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' })]
|
||||||
|
};
|
||||||
160
core/packages/js-pdf/src/main.js
Normal file
160
core/packages/js-pdf/src/main.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
1
core/packages/vue-docx/.npmrc
Normal file
1
core/packages/vue-docx/.npmrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
registry=https://registry.npmjs.org
|
||||||
1
core/packages/vue-excel/.npmrc
Normal file
1
core/packages/vue-excel/.npmrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
registry=https://registry.npmjs.org
|
||||||
@ -1,5 +1,4 @@
|
|||||||
export function readOnlyInput(ref){
|
export function readOnlyInput(root){
|
||||||
let root = ref.value;
|
|
||||||
if(root){
|
if(root){
|
||||||
let nodes = root.querySelectorAll('input');
|
let nodes = root.querySelectorAll('input');
|
||||||
for(let node of nodes){
|
for(let node of nodes){
|
||||||
@ -61,7 +61,7 @@ export default defineComponent({
|
|||||||
emit('error', e);
|
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 observer = new MutationObserver(observerCallback);
|
||||||
const observerConfig = { attributes: true, childList: true, subtree: true };
|
const observerConfig = { attributes: true, childList: true, subtree: true };
|
||||||
|
|
||||||
1
core/packages/vue-pdf/.npmrc
Normal file
1
core/packages/vue-pdf/.npmrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
registry=https://registry.npmjs.org
|
||||||
BIN
core/public/static/test-files/test2.docx
Normal file
BIN
core/public/static/test-files/test2.docx
Normal file
Binary file not shown.
@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import VueOfficeDocx from '../../packages/docx/index';
|
import VueOfficeDocx from '../../packages/vue-docx/index';
|
||||||
import PreviewWrapper from '../common/PreviewWrapper.vue';
|
import PreviewWrapper from '../common/PreviewWrapper.vue';
|
||||||
import useLoading from '../hooks/useLoading.js';
|
import useLoading from '../hooks/useLoading.js';
|
||||||
function onRendered(){
|
function onRendered(){
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import VueOfficeExcel from '../../packages/excel/index';
|
import VueOfficeExcel from '../../packages/vue-excel/index';
|
||||||
import '../../packages/excel/src/index.css';
|
import '../../packages/vue-excel/src/index.css';
|
||||||
import PreviewWrapper from '../common/PreviewWrapper.vue';
|
import PreviewWrapper from '../common/PreviewWrapper.vue';
|
||||||
import useLoading from '../hooks/useLoading.js';
|
import useLoading from '../hooks/useLoading.js';
|
||||||
function onRendered(){
|
function onRendered(){
|
||||||
|
|||||||
28
core/src/components/JsDocxDemo.vue
Normal file
28
core/src/components/JsDocxDemo.vue
Normal file
@ -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>
|
||||||
26
core/src/components/JsExcelDemo.vue
Normal file
26
core/src/components/JsExcelDemo.vue
Normal file
@ -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>
|
||||||
26
core/src/components/JsPdfDemo.vue
Normal file
26
core/src/components/JsPdfDemo.vue
Normal file
@ -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>
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import VueOfficePdf from '../../packages/pdf/index';
|
import VueOfficePdf from '../../packages/vue-pdf/index';
|
||||||
import PreviewWrapper from '../common/PreviewWrapper.vue';
|
import PreviewWrapper from '../common/PreviewWrapper.vue';
|
||||||
import useLoading from '../hooks/useLoading.js';
|
import useLoading from '../hooks/useLoading.js';
|
||||||
function onRendered(){
|
function onRendered(){
|
||||||
|
|||||||
@ -4,6 +4,9 @@ const routes = [
|
|||||||
{ path: '/docx', component: ()=> import('./components/DocxDemo.vue') },
|
{ path: '/docx', component: ()=> import('./components/DocxDemo.vue') },
|
||||||
{ path: '/excel', component: ()=> import('./components/ExcelDemo.vue') },
|
{ path: '/excel', component: ()=> import('./components/ExcelDemo.vue') },
|
||||||
{ path: '/pdf', component: ()=> import('./components/PdfDemo.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({
|
export default createRouter({
|
||||||
|
|||||||
1
examples/dist/assets/DocxDemo-9a59488f.css
vendored
Normal file
1
examples/dist/assets/DocxDemo-9a59488f.css
vendored
Normal file
@ -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}
|
||||||
96
examples/dist/assets/DocxDemo-c37510e5.js
vendored
Normal file
96
examples/dist/assets/DocxDemo-c37510e5.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
examples/dist/assets/DocxDemo-cc40b51c.js
vendored
Normal file
1
examples/dist/assets/DocxDemo-cc40b51c.js
vendored
Normal file
@ -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};
|
||||||
99
examples/dist/assets/ExcelDemo-2978cbce.js
vendored
Normal file
99
examples/dist/assets/ExcelDemo-2978cbce.js
vendored
Normal file
File diff suppressed because one or more lines are too long
99
examples/dist/assets/ExcelDemo-6e92ae1e.js
vendored
Normal file
99
examples/dist/assets/ExcelDemo-6e92ae1e.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
examples/dist/assets/JsDocxDemo-ccc76636.js
vendored
Normal file
1
examples/dist/assets/JsDocxDemo-ccc76636.js
vendored
Normal file
@ -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};
|
||||||
1
examples/dist/assets/PdfDemo-14d873ca.js
vendored
Normal file
1
examples/dist/assets/PdfDemo-14d873ca.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
examples/dist/assets/PdfDemo-a2c86166.js
vendored
Normal file
1
examples/dist/assets/PdfDemo-a2c86166.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
examples/dist/assets/PreviewWrapper-6c12c361.js
vendored
Normal file
1
examples/dist/assets/PreviewWrapper-6c12c361.js
vendored
Normal file
@ -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};
|
||||||
1
examples/dist/assets/PreviewWrapper-f4e9af1c.js
vendored
Normal file
1
examples/dist/assets/PreviewWrapper-f4e9af1c.js
vendored
Normal file
@ -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};
|
||||||
96
examples/dist/assets/docx-0c8fb292.js
vendored
Normal file
96
examples/dist/assets/docx-0c8fb292.js
vendored
Normal file
File diff suppressed because one or more lines are too long
121
examples/dist/assets/index-14c17763.js
vendored
Normal file
121
examples/dist/assets/index-14c17763.js
vendored
Normal file
File diff suppressed because one or more lines are too long
121
examples/dist/assets/index-893deb04.js
vendored
Normal file
121
examples/dist/assets/index-893deb04.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
examples/dist/index.html
vendored
2
examples/dist/index.html
vendored
@ -7,7 +7,7 @@
|
|||||||
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
/>
|
/>
|
||||||
<title>@vue-office演示demo</title>
|
<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">
|
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-cc8fb346.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
BIN
examples/dist/static/test-files/test2.docx
vendored
Normal file
BIN
examples/dist/static/test-files/test2.docx
vendored
Normal file
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user