matrix_components 2.0.300

package/dist/ComponentDemo/ExcelDemo.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="demo-container">
+    <div class="control-panel">
+      <h3>Excel 预览演示</h3>
+
+      <!-- 文件上传方式 -->
+      <div class="upload-section">
+        <h4>方式一：文件上传</h4>
+        <el-form-item label="弹框模式:">
+          <el-switch v-model="isShowDialog" @change="hideExcelHandler" />
+        </el-form-item>
+        <input
+          type="file"
+          @change="importExcel(($event.target as any)?.files?.[0])"
+          accept=".xls,.xlsx"
+        />
+        <button @click="clearFile" :disabled="!file">清除文件</button>
+      </div>
+
+      <!-- URL方式 -->
+      <div class="url-section">
+        <h4>方式二：URL地址</h4>
+        <input
+          v-model="excelUrl"
+          type="text"
+          placeholder="请输入Excel文件的URL地址"
+          class="url-input"
+        />
+        <button @click="loadFromUrl" :disabled="!excelUrl.trim()">加载URL</button>
+        <button @click="clearUrl" :disabled="!excelUrl">清除URL</button>
+      </div>
+      <button @click="exportExcel" class="export-btn">导出数据</button>
+    </div>
+
+    <!-- Excel组件 -->
+    <div class="excel-container">
+      <NsExcel
+        v-if="counts"
+        class="excel"
+        :file="file"
+        :isShowDialog="isShowDialog"
+        dialogWidth="1200px"
+        dialogHeight="700px"
+        ref="excelRef"
+        exportType="2"
+        @dialogExport="dialogExport"
+      ></NsExcel>
+    </div>
+    <!-- 导出数据展示 -->
+    <div class="data-display">
+      <div class="data-section">
+        <h4>导出数据格式1 (原始格式)</h4>
+        <pre>{{ data1 }}</pre>
+      </div>
+      <div class="data-section">
+        <h4>导出数据格式2 (Excel格式)</h4>
+        <pre>{{ data2 }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+
+const counts = ref(true)
+const isShowDialog = ref(false)
+const file = ref()
+const excelRef = ref()
+const data1 = ref()
+const data2 = ref()
+const excelUrl = ref(
+  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx',
+)
+
+function hideExcelHandler(val: boolean) {
+  counts.value = false
+  nextTick(() => {
+    counts.value = true
+    isShowDialog.value = val
+  })
+}
+
+function importExcel(f: any) {
+  // 清除URL，使用文件上传
+  excelUrl.value = ''
+  file.value = f
+}
+
+function loadFromUrl() {
+  if (excelUrl.value.trim()) {
+    // 清除文件，使用URL
+    file.value = excelUrl.value.trim()
+  }
+}
+
+function clearFile() {
+  file.value = null
+  data1.value = null
+  data2.value = null
+}
+
+function clearUrl() {
+  excelUrl.value = ''
+  data1.value = null
+  data2.value = null
+}
+
+function dialogExport(data: any) {
+  console.warn(`excel导出数据：${data}`)
+}
+
+function exportExcel() {
+  if (excelRef.value) {
+    data1.value = excelRef.value.exportExcel(1)
+    data2.value = excelRef.value.exportExcel(2)
+  }
+}
+</script>
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.control-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0 0 20px 0;
+    color: #333;
+  }
+
+  h4 {
+    margin: 15px 0 10px 0;
+    color: #666;
+    font-size: 14px;
+  }
+}
+
+.upload-section,
+.url-section,
+.example-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+
+  input[type='file'] {
+    margin-right: 10px;
+  }
+
+  .url-input {
+    width: 300px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #409eff;
+    }
+  }
+
+  button {
+    padding: 8px 16px;
+    background: #409eff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:hover:not(:disabled) {
+      background: #337ecc;
+    }
+
+    &:disabled {
+      background: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.export-btn {
+  padding: 10px 20px;
+  background: #67c23a;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+
+  &:hover {
+    background: #5daf34;
+  }
+}
+
+.excel {
+  width: 100%;
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+.data-display {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+
+  .data-section {
+    flex: 1;
+    background: #f9f9f9;
+    border-radius: 8px;
+    padding: 15px;
+
+    h4 {
+      margin: 0 0 10px 0;
+      color: #333;
+      font-size: 14px;
+    }
+
+    pre {
+      background: white;
+      padding: 15px;
+      border-radius: 4px;
+      border: 1px solid #e0e0e0;
+      max-height: 300px;
+      overflow: auto;
+      font-size: 12px;
+      line-height: 1.4;
+      margin: 0;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+  }
+}
+
+.excel-container {
+  height: 300px;
+}
+
+@media (max-width: 768px) {
+  .data-display {
+    flex-direction: column;
+  }
+
+  .url-input {
+    width: 100% !important;
+    margin-bottom: 10px;
+  }
+}
+</style>

package/dist/ComponentDemo/OfficeDemo.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="office-demo">
+    <h2>NsOffice 组件演示</h2>
+
+    <div class="demo-controls">
+      <!-- 文件上传方式 -->
+      <div class="upload-section">
+        <h3>方式一：文件上传</h3>
+        <input
+          type="file"
+          @change="importFile(($event.target as any)?.files?.[0])"
+          accept=".docx,.xlsx,.xls,.pdf"
+        />
+        <el-button @click="clearFile" :disabled="!file">清除文件</el-button>
+      </div>
+
+      <!-- URL方式 -->
+      <el-form :model="form" label-width="120px" inline>
+        <el-form-item label="文件URL:">
+          <el-input v-model="form.url" placeholder="请输入文件URL" style="width: 400px" />
+        </el-form-item>
+
+        <el-form-item label="Excel编辑模式:">
+          <el-switch v-model="form.isEdit" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="loadFile">加载文件</el-button>
+          <el-button @click="clearUrl">清空</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="demo-content">
+      <el-card v-if="currentUrl">
+        <template #header>
+          <div class="card-header">
+            <span>当前文件: {{ getFileName(currentUrl) }}</span>
+            <span class="file-type">类型: {{ getFileTypeDisplay() }}</span>
+          </div>
+        </template>
+
+        <div class="office-container">
+          <NsOffice v-bind="form" ref="officeRef" />
+        </div>
+      </el-card>
+
+      <el-empty v-else description="请输入文件URL或选择预设文件" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+const form = reactive({
+  url: '',
+  isEdit: false,
+  isShowDialog: false,
+  dialogWidth: '1200px',
+  dialogHeight: '700px',
+})
+
+const currentUrl = ref('')
+const officeRef = ref()
+const file = ref()
+
+// 文件上传处理
+function importFile(f: any) {
+  // 清除URL，使用文件上传
+  form.url = ''
+  file.value = f
+
+  if (f && (f.name.endsWith('.docx') || f.name.endsWith('.xlsx') || f.name.endsWith('.xls') || f.name.endsWith('.pdf'))) {
+    // 创建文件URL
+    const fileUrl = URL.createObjectURL(f)
+    currentUrl.value = fileUrl
+    form.url = fileUrl
+  } else if (f) {
+    alert('请选择支持的文件格式（.docx, .xlsx, .xls, .pdf）')
+    clearFile()
+  }
+}
+
+const loadFile = () => {
+  if (form.url.trim()) {
+    currentUrl.value = form.url.trim()
+  }
+}
+
+const clearFile = () => {
+  file.value = null
+  if (currentUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(currentUrl.value)
+  }
+  currentUrl.value = ''
+  form.url = ''
+}
+
+const clearUrl = () => {
+  form.url = ''
+  currentUrl.value = ''
+}
+
+const getFileName = (url: string) => {
+  if (!url) return ''
+  const parts = url.split('/')
+  return parts[parts.length - 1]
+}
+
+const getFileTypeDisplay = () => {
+  if (officeRef.value) {
+    const fileType = officeRef.value.getFileType()
+    switch (fileType) {
+      case 'excel':
+        return 'Excel文档'
+      case 'pdf':
+        return 'PDF文档'
+      case 'word':
+        return 'Word文档'
+      case 'unsupported':
+        return '不支持的格式'
+      default:
+        return '未知'
+    }
+  }
+  return '未知'
+}
+</script>
+
+<style scoped>
+.office-demo {
+  padding: 20px;
+}
+
+.demo-controls {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.upload-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
+.upload-section h3 {
+  margin: 0 0 10px 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.upload-section input[type='file'] {
+  margin-right: 10px;
+}
+
+.preset-files {
+  margin-top: 20px;
+}
+
+.preset-files h3 {
+  margin-bottom: 10px;
+  color: #666;
+}
+
+.demo-content {
+  min-height: 700px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-type {
+  color: #409eff;
+  font-size: 14px;
+}
+
+.office-container {
+  height: 600px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+</style>

package/dist/ComponentDemo/PdfDemo.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="demo-container">
+    <div class="control-panel">
+      <h3>PDF 文档预览演示</h3>
+
+      <!-- 文件上传方式 -->
+      <div class="upload-section">
+        <h4>方式一：文件上传</h4>
+        <input
+          type="file"
+          @change="importPdf(($event.target as any)?.files?.[0])"
+          accept=".pdf"
+        />
+        <button @click="clearFile" :disabled="!file">清除文件</button>
+      </div>
+
+      <!-- URL方式 -->
+      <div class="url-section">
+        <h4>方式二：URL地址</h4>
+        <input
+          v-model="pdfUrl"
+          type="text"
+          placeholder="请输入PDF文档的URL地址"
+          class="url-input"
+        />
+        <button @click="loadFromUrl" :disabled="!pdfUrl.trim()">加载URL</button>
+        <button @click="clearUrl" :disabled="!pdfUrl">清除URL</button>
+      </div>
+
+      <!-- 搜索功能 -->
+      <div class="search-section">
+        <h4>文档搜索</h4>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="输入要搜索的关键字"
+          class="search-input"
+        />
+        <button @click="clickPdf" :disabled="!searchKeyword.trim()">搜索</button>
+      </div>
+    </div>
+
+    <!-- PDF组件 -->
+    <div class="pdf-container">
+      <NsPdf
+        v-if="counts"
+        ref="pdfRef"
+        :url="currentUrl"
+        :hasTool="true">
+      </NsPdf>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+const counts = ref(true)
+const file = ref()
+const pdfRef = ref()
+const pdfUrl = ref(
+  'https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf',
+)
+const currentUrl = ref(pdfUrl.value)
+const searchKeyword = ref('')
+
+function importPdf(f: any) {
+  // 清除URL，使用文件上传
+  pdfUrl.value = ''
+  file.value = f
+
+  if (f && f.name.endsWith('.pdf')) {
+    // 创建文件URL
+    const fileUrl = URL.createObjectURL(f)
+    currentUrl.value = fileUrl
+  } else if (f) {
+    alert('请选择PDF文件')
+    clearFile()
+  }
+}
+
+function loadFromUrl() {
+  if (pdfUrl.value.trim()) {
+    // 清除文件，使用URL
+    clearFile()
+    currentUrl.value = pdfUrl.value.trim()
+  }
+}
+
+function clearFile() {
+  file.value = null
+  if (currentUrl.value.startsWith('blob:')) {
+    URL.revokeObjectURL(currentUrl.value)
+  }
+  currentUrl.value = ''
+}
+
+function clearUrl() {
+  pdfUrl.value = ''
+  currentUrl.value = ''
+}
+
+function clickPdf() {
+  if (searchKeyword.value.trim() && pdfRef.value) {
+    pdfRef.value.search(searchKeyword.value.trim())
+  }
+}
+
+// 重新加载组件
+function reloadComponent() {
+  counts.value = false
+  nextTick(() => {
+    counts.value = true
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.control-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+
+  h3 {
+    margin: 0 0 20px 0;
+    color: #333;
+  }
+
+  h4 {
+    margin: 15px 0 10px 0;
+    color: #666;
+    font-size: 14px;
+  }
+}
+
+.upload-section,
+.url-section,
+.search-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: white;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+
+  input[type='file'] {
+    margin-right: 10px;
+  }
+
+  .url-input,
+  .search-input {
+    width: 300px;
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #409eff;
+    }
+  }
+
+  button {
+    padding: 8px 16px;
+    background: #409eff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    font-size: 14px;
+
+    &:hover:not(:disabled) {
+      background: #337ecc;
+    }
+
+    &:disabled {
+      background: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.pdf-container {
+  height: 600px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .url-input,
+  .search-input {
+    width: 100% !important;
+    margin-bottom: 10px;
+  }
+}
+</style>

package/dist/ComponentDemo/Test.vue

@@ -0,0 +1,6 @@
+<template>
+<span>Test</span>
+</template>
+<script setup lang="ts">
+</script>
+<style scoped></style>