### Install @vue-office/pptx

Source: https://context7.com/501351981/vue-office/llms.txt

Install the PPTX preview component and its peer dependency vue-demi.

```bash
npm install @vue-office/pptx vue-demi@0.14.6
```

--------------------------------

### Install @vue-office/pdf

Source: https://context7.com/501351981/vue-office/llms.txt

Install the PDF preview component and its peer dependency vue-demi.

```bash
npm install @vue-office/pdf vue-demi@0.14.6
```

--------------------------------

### Install @vue-office/excel

Source: https://context7.com/501351981/vue-office/llms.txt

Install the Excel preview component and its peer dependency vue-demi.

```bash
npm install @vue-office/excel vue-demi@0.14.6
```

--------------------------------

### Install @vue-office/docx and vue-demi

Source: https://context7.com/501351981/vue-office/llms.txt

Install the DOCX preview component and its peer dependency vue-demi. For Vue 2.6 and below, also install @vue/composition-api.

```bash
npm install @vue-office/docx vue-demi@0.14.6
# Vue 2.6 及以下还需额外安装：
npm install @vue/composition-api
```

--------------------------------

### Install framework-agnostic JS preview packages

Source: https://context7.com/501351981/vue-office/llms.txt

Install the JavaScript preview packages for DOCX, Excel, and PDF if you are not using Vue.

```bash
npm install @js-preview/docx
npm install @js-preview/excel
npm install @js-preview/pdf
```

--------------------------------

### Install vue-office Docx Component

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/guide/index.html

Install the docx document preview component and vue-demi. If using Vue 2.6 or below, also install @vue/composition-api.

```shell
npm install @vue-office/docx vue-demi

# If using Vue 2.6 or below
npm install @vue/composition-api
```

--------------------------------

### Install vue-office PDF Component

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/guide/index.html

Install the pdf document preview component and vue-demi.

```shell
npm install @vue-office/pdf vue-demi
```

--------------------------------

### Install vue-office Excel Component

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/guide/index.html

Install the excel document preview component and vue-demi.

```shell
npm install @vue-office/excel vue-demi
```

--------------------------------

### Vue PDF Preview from Network URL

Source: https://github.com/501351981/vue-office/blob/master/README.md

Example for previewing PDF files from a network URL. Similar to DOCX and Excel, ensure the VueOfficePdf component and its CSS are imported. Includes handlers for rendering completion and errors.

```vue
<template>
    <vue-office-pdf
        :src="pdf"
        style="height: 100vh"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

export default {
    components: {
        VueOfficePdf
    },
    data() {
        return {
            pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>
```

--------------------------------

### Vue DOCX Preview from File Input (ArrayBuffer)

Source: https://github.com/501351981/vue-office/blob/master/README.md

This example shows how to preview DOCX files uploaded via a file input. It reads the file as an ArrayBuffer and passes it to the component's src attribute. Ensure VueOfficeDocx and its CSS are imported.

```vue
<template>
    <div>
        <input type="file" @change="changeHandle"/>
        <vue-office-docx :src="src"/>
    </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data(){
        return {
            src: ''
        }
    },
    methods:{
        changeHandle(event){
            let file = event.target.files[0]
            let fileReader = new FileReader()
            fileReader.readAsArrayBuffer(file)
            fileReader.onload =  () => {
                this.src = fileReader.result
            }
        }
    }
}
</script>
```

--------------------------------

### VueOfficeExcel Component Usage

Source: https://context7.com/501351981/vue-office/llms.txt

Demonstrates how to integrate the VueOfficeExcel component in a Vue.js application. Includes basic setup, event handling, and configuration options.

```vue
<template>
  <div style="height: 600px;">
    <vue-office-excel
      :src="excelSrc"
      :options="excelOptions"
      style="height: 100%;"
      @rendered="onRendered"
      @error="onError"
      @switchSheet="onSwitchSheet"
      @cellSelected="onCellSelected"
      @cellsSelected="onCellsSelected"
      ref="excelRef"
    />
    <div>当前 Sheet：{{ currentSheet }}</div>
    <div>选中单元格：{{ selectedCell }}</div>
    <button @click="$refs.excelRef.save('报表.xlsx')">下载</button>
  </div>
</template>

<script>
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'

export default {
  components: { VueOfficeExcel },
  data() {
    return {
      excelSrc: 'https://example.com/report.xlsx',
      currentSheet: 0,
      selectedCell: null,
      excelOptions: {
        xls: false,            // 是否为 .xls 格式
        minColLength: 30,      // 最少显示 30 列
        minRowLength: 50,      // 最少显示 50 行
        showContextmenu: true, // 显示右键菜单

        // 数据转换前钩子：可修改 workbook 原始数据
        beforeTransformData(workbook) {
          console.log('工作簿信息：', workbook._worksheets.length, '个 Sheet')
          return workbook
        },

        // 数据转换后钩子：可修改最终渲染数据
        transformData(workbookData) {
          console.log('转换后数据：', workbookData)
          return workbookData
        }
      }
    }
  },
  methods: {
    onRendered() {
      console.log('Excel 渲染完成')
    },
    onError(err) {
      console.error('Excel 渲染失败：', err.message)
    },
    onSwitchSheet(index) {
      this.currentSheet = index
      console.log('切换到第', index, '个 Sheet')
    },
    onCellSelected({ cell, rowIndex, columnIndex }) {
      this.selectedCell = `行${rowIndex} 列${columnIndex}`
      console.log('单元格内容：', cell)
    },
    onCellsSelected({ startRowIndex, startColumnIndex, endRowIndex, endColumnIndex }) {
      console.log(`选中区域：(${startRowIndex},${startColumnIndex}) ~ (${endRowIndex},${endColumnIndex})`)
    }
  }
}
</script>
```

--------------------------------

### VueOfficeDocx Component Usage

Source: https://context7.com/501351981/vue-office/llms.txt

Example of using the VueOfficeDocx component to preview a Word document. It demonstrates binding the src, options, and requestOptions props, and handling rendered and error events. The save method can be called to download the document.

```vue
<template>
  <div style="height: 100vh;">
    <!-- 1. 通过网络 URL 预览 -->
    <vue-office-docx
      :src="docxUrl"
      :options="docxOptions"
      :requestOptions="reqOptions"
      style="height: 100%;"
      @rendered="onRendered"
      @error="onError"
      ref="docxRef"
    />

    <button @click="saveDoc">下载文档</button>
    <button @click="switchDoc">切换文档</button>
  </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
  components: { VueOfficeDocx },
  data() {
    return {
      // 方式1：网络地址
      docxUrl: 'https://example.com/sample.docx',
      // 方式2：也可传入 ArrayBuffer 或 Blob
      // docxUrl: null,

      docxOptions: {
        renderHeaders: true,
        renderFooters: true,
        breakPages: true,
        className: 'my-docx-wrapper'
      },
      reqOptions: {
        headers: { Authorization: 'Bearer token123' },
        withCredentials: true
      }
    }
  },
  mounted() {
    // 方式2：通过接口获取二进制流
    // fetch('/api/document/123', { method: 'POST' })
    //   .then(res => res.arrayBuffer())
    //   .then(buffer => { this.docxUrl = buffer })

    // 方式3：文件上传时预览
    // const file = event.target.files[0]
    // const reader = new FileReader()
    // reader.readAsArrayBuffer(file)
    // reader.onload = () => { this.docxUrl = reader.result }
  },
  methods: {
    onRendered() {
      console.log('Word 文档渲染完成')
    },
    onError(error) {
      console.error('Word 文档渲染失败：', error.message)
    },
    saveDoc() {
      // 调用组件实例的 save 方法下载
      this.$refs.docxRef.save('我的文档.docx')
    },
    switchDoc() {
      this.docxUrl = 'https://example.com/another.docx'
      // src 变化时组件自动重新渲染
    }
  }
}
</script>
```

--------------------------------

### Initialize and Use jsPreviewDocx

Source: https://context7.com/501351981/vue-office/llms.txt

Initializes a Word document preview instance. Use this for framework-agnostic Word previews. Ensure the container element exists and is mounted.

```javascript
import jsPreviewDocx from '@js-preview/docx'
import '@js-preview/docx/lib/index.css'

// 获取挂载容器
const container = document.getElementById('docx-container')

// 初始化预览实例
const docxPreview = jsPreviewDocx.init(container, {
  renderHeaders: true,
  renderFooters: true,
  breakPages: true
}, {
  headers: { Authorization: 'Bearer token' }
})

// 通过 URL 预览
docxPreview.preview('https://example.com/document.docx')
  .then(() => {
    console.log('Word 文档渲染完成')
    // 下载文件
    docxPreview.save('下载文档.docx')
  })
  .catch(err => {
    console.error('渲染失败：', err.message)
  })

// 动态切换文档
setTimeout(() => {
  docxPreview.preview('https://example.com/another.docx')
}, 3000)

// 更新配置
docxPreview.setOptions({ renderHeaders: false })

// 组件卸载时销毁实例，释放 DOM
docxPreview.destroy()

// React 使用示例：
// import { useEffect, useRef } from 'react'
// function DocxViewer({ src }) {
//   const containerRef = useRef(null)
//   const instanceRef = useRef(null)
//   useEffect(() => {
//     instanceRef.current = jsPreviewDocx.init(containerRef.current)
//     instanceRef.current.preview(src)
//     return () => instanceRef.current.destroy()
//   }, [src])
//   return <div ref={containerRef} style={{ height: '100vh' }} />
// }
```

--------------------------------

### jsPreviewDocx.init() — Initialize DOCX Preview Instance

Source: https://context7.com/501351981/vue-office/llms.txt

Initializes a Word document preview instance for non-Vue environments. The `init` method returns an instance with methods for previewing, saving, updating options, and destroying the instance.

```APIDOC
## jsPreviewDocx.init(container, options, requestOptions)

### Description
Initializes a Word document preview instance for non-Vue environments. The `init` method returns an instance with methods for previewing, saving, updating options, and destroying the instance.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Method
```javascript
jsPreviewDocx.init(container, options, requestOptions)
```

### Parameters
- **container** (HTMLElement) - The DOM element to mount the preview.
- **options** (object) - Configuration options for the previewer.
  - **renderHeaders** (boolean) - Whether to render headers.
  - **renderFooters** (boolean) - Whether to render footers.
  - **breakPages** (boolean) - Whether to break pages.
- **requestOptions** (object) - Options for fetch requests, such as headers.
  - **headers** (object) - Custom headers for requests.

### Returns
An object with the following methods:
- **preview(url)**: Previews a document from the given URL.
- **save(filename)**: Saves the current document with the specified filename.
- **setOptions(options)**: Updates the previewer options.
- **setRequestOptions(requestOptions)**: Updates the request options.
- **destroy()**: Destroys the preview instance and releases resources.

### Request Example
```javascript
import jsPreviewDocx from '@js-preview/docx'
import '@js-preview/docx/lib/index.css'

const container = document.getElementById('docx-container')
const docxPreview = jsPreviewDocx.init(container, {
  renderHeaders: true,
  renderFooters: true,
  breakPages: true
}, {
  headers: { Authorization: 'Bearer token' }
})

docxPreview.preview('https://example.com/document.docx')
  .then(() => {
    console.log('Word 文档渲染完成')
    docxPreview.save('下载文档.docx')
  })
  .catch(err => {
    console.error('渲染失败：', err.message)
  })

docxPreview.destroy()
```
```

--------------------------------

### Vue PPTX Preview from Network URL

Source: https://github.com/501351981/vue-office/blob/master/README.md

This snippet demonstrates how to preview PPTX files using a network URL. It requires importing the VueOfficePptx component and its CSS. Handlers for rendering and errors are provided.

```vue
<template>
    <vue-office-pptx
        :src="pdf"
        style="height: 100vh"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
import VueOfficePptx from '@vue-office/pptx'

export default {
    components: {
        VueOfficePptx
    },
    data() {
        return {
            pdf: 'http://****/test.pptx' //设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>
```

--------------------------------

### Preview Docx File from URL

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/guide/index.html

Use the VueOfficeDocx component to preview a docx file by providing its remote URL to the 'src' prop. Import the component and its CSS. Event handlers for 'rendered' and 'error' are available.

```vue
<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>
```

--------------------------------

### Vue Office PPTX Component Usage

Source: https://context7.com/501351981/vue-office/llms.txt

Shows how to integrate the VueOfficePptx component for PowerPoint presentation previews. Covers source binding, rendering options for dimensions, and event handling for rendering completion and errors.

```vue
<template>
  <div style="height: 100vh;">
    <vue-office-pptx
      :src="pptxSrc"
      :options="pptxOptions"
      style="height: 100%;"
      @rendered="onRendered"
      @error="onError"
    />
  </div>
</template>

<script>
import VueOfficePptx from '@vue-office/pptx'

export default {
  components: { VueOfficePptx },
  data() {
    return {
      pptxSrc: 'https://example.com/presentation.pptx',
      pptxOptions: {
        width: 1280,  // 渲染宽度（像素），默认使用容器宽度
        height: 720   // 渲染高度（像素），默认使用容器高度
      }
    }
  },
  methods: {
    onRendered(pptx) {
      console.log('PPT 渲染完成，共', pptx.slides?.length, '页')
    },
    onError(err) {
      console.error('PPT 渲染失败：', err.message)
    }
  }
}
</script>
```

--------------------------------

### options

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/config/index.html

Provides specific configuration settings for different preview components, such as Excel, Docx, and PDF.

```APIDOC
## options

### Description
Provides specific configuration settings for different preview components, such as Excel, Docx, and PDF.

### Type
Object

### Excel Preview Options
*   `minColLength` (number): Minimum number of columns to render. Set to 0 to render all columns present in the file.
*   `minRowLength` (number): Minimum number of rows to render. Set to 0 to render all rows present in the file.
*   `widthOffset` (number): Additional width in pixels to add to the default rendering width.
*   `heightOffset` (number): Additional height in pixels to add to the default rendering height.
*   `beforeTransformData` (function): A hook that allows modification of the workbook data after it's retrieved by exceljs, but before it's processed for rendering. Receives `workbookData` as an argument.
*   `transformData` (function): A hook that allows modification of the data and styles just before they are rendered to the page. Receives `workbookData` as an argument.

### Docx Preview Options
*   `className` (string): Class name/prefix for default and document style classes.
*   `inWrapper` (boolean): Enables rendering of a wrapper around the document content.
*   `ignoreWidth` (boolean): Disables rendering of the page width.
*   `ignoreHeight` (boolean): Disables rendering of the page height.
*   `ignoreFonts` (boolean): Disables fonts rendering.
*   `breakPages` (boolean): Enables page breaking on page breaks.
*   `ignoreLastRenderedPageBreak` (boolean): Disables page breaking on `lastRenderedPageBreak` elements.
*   `experimental` (boolean): Enables experimental features (tab stops calculation).
*   `trimXmlDeclaration` (boolean): If true, the XML declaration will be removed from XML documents before parsing.
*   `useBase64URL` (boolean): If true, images, fonts, etc., will be converted to base64 URLs; otherwise, `URL.createObjectURL` is used.
*   `useMathMLPolyfill` (boolean): Includes MathML polyfills for Chrome, Edge, etc.
*   `showChanges` (boolean): Enables experimental rendering of document changes (insertions/deletions).
*   `debug` (boolean): Enables additional logging.

### PDF Preview Options
*   `width` (number): Optional. Controls the width of the PDF preview. Defaults to the document's actual width.
*   `httpHeaders` (object): Basic authentication headers.
*   `password` (string): Password for encrypted PDFs.
*   Refer to [https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html) for more options.
```

--------------------------------

### jsPreviewPdf.init() — Initialize PDF Preview Instance

Source: https://context7.com/501351981/vue-office/llms.txt

Initializes a PDF document preview instance with virtual scrolling and render callbacks.

```APIDOC
## jsPreviewPdf.init(container, options, requestOptions)

### Description
Initializes a PDF document preview instance with virtual scrolling and render callbacks. Supports `rerender`, `save` methods and `onRendered`/`onError` callbacks.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Method
```javascript
jsPreviewPdf.init(container, options, requestOptions)
```

### Parameters
- **container** (HTMLElement) - The DOM element to mount the preview. Must have a defined height for virtual scrolling.
- **options** (object) - Configuration options for the previewer.
  - **staticFileUrl** (string) - CDN URL for pdfjs-dist (use local address for private deployment).
  - **width** (number) - Fixed width of each page in pixels.
  - **gap** (number) - Gap between pages in pixels.
  - **password** (string) - Password for encrypted PDFs.
  - **onRendered** (function) - Callback function when a page is rendered.
  - **onError** (function) - Callback function when rendering fails.
- **requestOptions** (object) - Options for fetch requests, such as headers and credentials.
  - **withCredentials** (boolean) - Whether to include credentials (like cookies) in requests.
  - **headers** (object) - Custom headers for requests.

### Returns
An object with the following methods:
- **preview(url)**: Previews a PDF file from the given URL.
- **rerender()**: Forces a re-render of the preview (useful after container resize).
- **save(filename)**: Saves the current PDF with the specified filename.
- **setOptions(options)**: Updates the previewer options and re-renders.
- **destroy()**: Destroys the preview instance and releases resources.

### Request Example
```javascript
import jsPreviewPdf from '@js-preview/pdf'

const container = document.getElementById('pdf-container')
container.style.height = '800px' // Set a defined height

const pdfPreview = jsPreviewPdf.init(container, {
  staticFileUrl: 'https://unpkg.com/pdfjs-dist@3.1.81/',
  width: 900,
  gap: 20,
  onRendered() {
    console.log('PDF page rendered')
  },
  onError(err) {
    console.error('PDF rendering failed:', err.message)
  }
}, {
  withCredentials: true,
  headers: { Authorization: 'Bearer token' }
})

pdfPreview.preview('https://example.com/manual.pdf')

window.addEventListener('resize', () => {
  pdfPreview.rerender()
})

document.getElementById('download-btn').addEventListener('click', () => {
  pdfPreview.save('Manual.pdf')
})

pdfPreview.destroy()
```
```

--------------------------------

### jsPreviewExcel.init() — Initialize Excel Preview Instance

Source: https://context7.com/501351981/vue-office/llms.txt

Initializes an Excel spreadsheet preview instance. Supports cell selection events via callbacks.

```APIDOC
## jsPreviewExcel.init(container, options, requestOptions)

### Description
Initializes an Excel spreadsheet preview instance. Supports cell selection events via callbacks.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Method
```javascript
jsPreviewExcel.init(container, options, requestOptions)
```

### Parameters
- **container** (HTMLElement) - The DOM element to mount the preview.
- **options** (object) - Configuration options for the previewer.
  - **xls** (boolean) - Whether the file is in .xls format.
  - **minColLength** (number) - Minimum number of columns to display.
  - **showContextmenu** (boolean) - Whether to show the context menu.
  - **cellSelected** (function) - Callback function for cell selection.
    - **cell** (object) - The selected cell data.
    - **rowIndex** (number) - The row index of the selected cell.
    - **columnIndex** (number) - The column index of the selected cell.
  - **cellsSelected** (function) - Callback function for area selection.
    - **startRowIndex** (number) - The starting row index of the selected area.
    - **startColumnIndex** (number) - The starting column index of the selected area.
    - **endRowIndex** (number) - The ending row index of the selected area.
    - **endColumnIndex** (number) - The ending column index of the selected area.
- **requestOptions** (object) - Options for fetch requests, such as headers.
  - **headers** (object) - Custom headers for requests.

### Returns
An object with the following methods:
- **preview(url | ArrayBuffer)**: Previews an Excel file from a URL or ArrayBuffer.
- **save(filename)**: Saves the current spreadsheet with the specified filename.
- **destroy()**: Destroys the preview instance and releases resources.

### Request Example
```javascript
import jsPreviewExcel from '@js-preview/excel'
import '@js-preview/excel/lib/index.css'

const container = document.getElementById('excel-container')
const excelPreview = jsPreviewExcel.init(container, {
  xls: false,
  minColLength: 26,
  showContextmenu: false,
  cellSelected({ cell, rowIndex, columnIndex }) {
    console.log(`Selected cell (${rowIndex}, ${columnIndex}):`, cell)
  },
  cellsSelected({ startRowIndex, startColumnIndex, endRowIndex, endColumnIndex }) {
    console.log(`Selected area (${startRowIndex},${startColumnIndex})~(${endRowIndex},${endColumnIndex})`)
  }
}, {
  headers: { 'X-Custom-Header': 'value' }
})

excelPreview.preview('https://example.com/report.xlsx')
  .then(() => {
    console.log('Excel rendering complete')
    excelPreview.save('Report.xlsx')
  })
  .catch(err => console.error('Rendering failed:', err.message))

window.addEventListener('beforeunload', () => excelPreview.destroy())
```
```

--------------------------------

### Initialize and Use jsPreviewExcel

Source: https://context7.com/501351981/vue-office/llms.txt

Initializes an Excel preview instance. Supports cell selection callbacks and custom fetch options. Ensure the container element exists and is mounted.

```javascript
import jsPreviewExcel from '@js-preview/excel'
import '@js-preview/excel/lib/index.css'

const container = document.getElementById('excel-container')

const excelPreview = jsPreviewExcel.init(container, {
  xls: false,             // 是否 .xls 格式
  minColLength: 26,       // 最少显示 26 列
  showContextmenu: false, // 不显示右键菜单

  // 单元格选中回调
  cellSelected({ cell, rowIndex, columnIndex }) {
    console.log(`选中单元格 (${rowIndex}, ${columnIndex})：`, cell)
  },

  // 区域选中回调
  cellsSelected({ startRowIndex, startColumnIndex, endRowIndex, endColumnIndex }) {
    console.log(`选中区域 (${startRowIndex},${startColumnIndex})~(${endRowIndex},${endColumnIndex})`)
  }
}, {
  // fetch 请求选项
  headers: { 'X-Custom-Header': 'value' }
})

// 通过 URL 预览 .xlsx 文件
excelPreview.preview('https://example.com/report.xlsx')
  .then(() => {
    console.log('Excel 渲染完成')
    excelPreview.save('报表.xlsx')
  })
  .catch(err => console.error('渲染失败：', err.message))

// 通过 ArrayBuffer 预览（例如文件上传场景）
document.querySelector('input[type=file]').addEventListener('change', (e) => {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = () => {
    excelPreview.preview(reader.result)
      .then(() => console.log('上传文件预览完成'))
  }
})

// 销毁实例
window.addEventListener('beforeunload', () => excelPreview.destroy())
```

--------------------------------

### Vue Office PDF Component Usage

Source: https://context7.com/501351981/vue-office/llms.txt

Demonstrates how to use the VueOfficePdf component for PDF preview. Includes configuration for source, options, and event handling for rendering and errors. Also shows methods for zoom control and saving.

```vue
<template>
  <div style="height: 100vh; display: flex; flex-direction: column;">
    <!-- 缩放控制栏 -->
    <div style="padding: 8px; background: #f0f0f0;">
      <button @click="zoomOut">缩小</button>
      <span>缩放：{{ currentScale }}</span>
      <button @click="zoomIn">放大</button>
      <button @click="$refs.pdfRef.rerender()">重新渲染</button>
      <button @click="$refs.pdfRef.save('文档.pdf')">下载</button>
    </div>

    <!-- PDF 预览区域 -->
    <vue-office-pdf
      :src="pdfSrc"
      :options="pdfOptions"
      :staticFileUrl="staticFileUrl"
      style="flex: 1; overflow: auto;"
      @rendered="onRendered"
      @error="onError"
      ref="pdfRef"
    />
  </div>
</template>

<script>
import VueOfficePdf from '@vue-office/pdf'

export default {
  components: { VueOfficePdf },
  data() {
    return {
      pdfSrc: 'https://example.com/document.pdf',
      currentScale: 1,
      // 私有化部署时可指定本地 pdfjs 资源地址
      staticFileUrl: 'https://unpkg.com/pdfjs-dist@3.1.81/',
      pdfOptions: {
        width: 800,       // 固定宽度 800px
        gap: 15,          // 页间距 15px
        defaultScale: 1,  // 初始缩放 1:1
        // 加密文档：
        // password: 'my-password',
        // 带鉴权的请求：
        // withCredentials: true,
      }
    }
  },
  methods: {
    onRendered() {
      this.currentScale = this.$refs.pdfRef.getScale().value
      console.log('PDF 页面渲染完成，当前缩放：', this.currentScale)
    },
    onError(err) {
      console.error('PDF 渲染失败：', err.message)
    },
    zoomIn() {
      const newScale = this.currentScale + 0.2
      this.$refs.pdfRef.setScale(newScale)
      this.currentScale = newScale
    },
    zoomOut() {
      const newScale = Math.max(0.2, this.currentScale - 0.2)
      this.$refs.pdfRef.setScale(newScale)
      this.currentScale = newScale
    }
  }
}
</script>
```

--------------------------------

### Excel Preview Options

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/config/index.html

Configure Excel preview behavior, including minimum rendered columns/rows, width/height offsets, and data transformation hooks.

```javascript
{
  "minColLength": 20, 
  "minRowLength": 100,
  "widthOffset": 10, //在默认渲染的列表宽度上再加10px宽
  "heightOffset": 10, //在默认渲染的列表高度上再加10px高
  "beforeTransformData": function (workbookData){
        //修改workbookData，可以打印出来看看数据格式
        return workbookData;
  },
  "transformData": function (workbookData){
      //修改workbookData，可以打印出来看看数据格式
      return workbookData;    
  }
}
```

--------------------------------

### Vue DOCX Preview from API (ArrayBuffer)

Source: https://github.com/501351981/vue-office/blob/master/README.md

Preview DOCX files fetched from a POST API endpoint that returns binary stream data. The ArrayBuffer is obtained from the response and passed to the src attribute. Import VueOfficeDocx and its CSS.

```vue
<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="rendered"
    />
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components:{
        VueOfficeDocx
    },
    data(){
        return {
            docx: ''
        }
    },
    mounted(){
        fetch('你的API文件地址', {
            method: 'post'
        }).then(res=>{
            //读取文件的arrayBuffer
            res.arrayBuffer().then(res=>{
                this.docx = res
            })
        })
    },
    methods:{
        rendered(){
            console.log("渲染完成")
        }
    }
}
</script>
```

--------------------------------

### Vue DOCX Preview from Network URL

Source: https://github.com/501351981/vue-office/blob/master/README.md

Use this snippet to preview DOCX files directly from a network URL. Ensure the component is imported and CSS is included.

```vue
<template>
    <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="rendered"
    />
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
    components:{
        VueOfficeDocx
    },
    data(){
        return {
            docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
        }
    },
    methods:{
        rendered(){
            console.log("渲染完成")
        }
    }
}
</script>
```

--------------------------------

### PDF Preview Options

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/config/index.html

Configure PDF preview options, including width, HTTP headers for authentication, and password for encrypted PDFs. Further options are available in the pdf.js library.

```javascript
const options = {
    width: 500, //number，可不传，用来控制pdf预览的宽度，默认根据文档实际宽度计算
    httpHeaders: {}, //object, Basic authentication headers
    password: '', //string, 加密pdf的密码
    //更多配置参见 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html
}
```

--------------------------------

### VueOfficePptx Component

Source: https://context7.com/501351981/vue-office/llms.txt

The VueOfficePptx component allows for online preview of .pptx format slides using the pptx-preview library. It supports configuring rendering dimensions via options.

```APIDOC
## VueOfficePptx — PowerPoint 演示文稿预览组件

通过 `@vue-office/pptx` 提供，基于 `pptx-preview` 自研库实现，支持 `.pptx` 格式幻灯片的在线预览。可通过 `options.width` 和 `options.height` 配置渲染尺寸（默认使用容器宽高）。

### Props

| prop | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `src` | `String \| ArrayBuffer` | — | 文档来源（URL 或 ArrayBuffer） |
| `requestOptions` | `Object` | `{}` | fetch 请求配置 |
| `options` | `Object` | `{}` | 渲染配置（支持 `width`、`height`） |

### Events

| 事件名 | 参数 | 说明 |
|------|------|------|
| `rendered` | `pptx` | 渲染完成时触发，参数为 pptx 解析对象 |
| `error` | `Error` | 渲染失败时触发 |

### Example Usage

```vue
<template>
  <div style="height: 100vh;">
    <vue-office-pptx
      :src="pptxSrc"
      :options="pptxOptions"
      style="height: 100%;"
      @rendered="onRendered"
      @error="onError"
    />
  </div>
</template>

<script>
import VueOfficePptx from '@vue-office/pptx'

export default {
  components: { VueOfficePptx },
  data() {
    return {
      pptxSrc: 'https://example.com/presentation.pptx',
      pptxOptions: {
        width: 1280,  // 渲染宽度（像素），默认使用容器宽度
        height: 720   // 渲染高度（像素），默认使用容器高度
      }
    }
  },
  methods: {
    onRendered(pptx) {
      console.log('PPT 渲染完成，共', pptx.slides?.length, '页')
    },
    onError(err) {
      console.error('PPT 渲染失败：', err.message)
    }
  }
}
</script>

```

--------------------------------

### Vue Excel Preview from Network URL

Source: https://github.com/501351981/vue-office/blob/master/README.md

Demonstrates previewing Excel files using a network URL. This component requires VueOfficeExcel and its associated CSS. Error and render completion handlers are included.

```vue
<template>
    <vue-office-excel
        :src="excel"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
    components: {
        VueOfficeExcel
    },
    data() {
        return {
            excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
        }
    },
    methods: {
        renderedHandler() {
            console.log("渲染完成")
        },
        errorHandler() {
            console.log("渲染失败")
        }
    }
}
</script>
```

--------------------------------

### Initialize and Use jsPreviewPdf

Source: https://context7.com/501351981/vue-office/llms.txt

Initializes a PDF document preview instance. Supports virtual scrolling, rerendering, and saving. Ensure the container has a defined height for virtual scrolling.

```javascript
import jsPreviewPdf from '@js-preview/pdf'

const container = document.getElementById('pdf-container')
// container 需要设置明确的高度以支持虚拟滚动
container.style.height = '800px'

const pdfPreview = jsPreviewPdf.init(container, {
  // 自定义 pdfjs CDN（私有化部署时使用本地地址）
  staticFileUrl: 'https://unpkg.com/pdfjs-dist@3.1.81/',

  width: 900,   // 固定每页宽度（像素）
  gap: 20,      // 页间距 20px

  // 加密 PDF
  // password: 'secret',

  // 渲染回调
  onRendered() {
    console.log('PDF 页面渲染完成')
  },
  onError(err) {
    console.error('PDF 渲染失败：', err.message)
  }
}, {
  withCredentials: true,
  headers: { Authorization: 'Bearer token' }
})

// 预览 PDF 文件
pdfPreview.preview('https://example.com/manual.pdf')

// 强制重新渲染（容器尺寸变化后使用）
window.addEventListener('resize', () => {
  pdfPreview.rerender()
})

// 下载文件
document.getElementById('download-btn').addEventListener('click', () => {
  pdfPreview.save('手册.pdf')
})

// 更新配置后重新预览
pdfPreview.setOptions({ width: 1200, gap: 10 })
pdfPreview.preview('https://example.com/another.pdf')

// 页面卸载时清理资源
window.addEventListener('beforeunload', () => pdfPreview.destroy())
```

--------------------------------

### requestOptions - Universal Request Configuration

Source: https://context7.com/501351981/vue-office/llms.txt

Universal request configuration applicable to all components and JS preview instances for customizing document requests.

```APIDOC
## requestOptions

### Description
All components and JS preview instances support `requestOptions` for configuring HTTP options for document requests, which are passed directly to fetch/pdfjs.

### Parameters
- **headers** (object) - Custom headers to include in the request.
  - **Authorization** (string) - Bearer token for authentication.
  - **X-Tenant-Id** (string) - Tenant ID for multi-tenant applications.
- **withCredentials** (boolean) - Whether to include credentials (like cookies) in cross-origin requests.

### Usage Example
```javascript
// Vue component usage
const requestOptions = {
  headers: {
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9...',
    'X-Tenant-Id': 'tenant-001'
  },
  withCredentials: true  // Include cookies in cross-origin requests
}

// PDF component also supports direct configuration in options:
const pdfOptions = {
  httpHeaders: { Authorization: 'Bearer token' },
  withCredentials: true,
  password: 'pdf-password'  // Password for encrypted documents
}
```
```

--------------------------------

### Preview Docx File from Upload (Native Input)

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/guide/index.html

Preview a docx file using a native HTML file input. The file's ArrayBuffer is read using FileReader in the change event handler and passed to the VueOfficeDocx component's src prop.

```vue
<template>
    <div>
        <input type="file" @change="changeHandle"/>
        <vue-office-docx :src="src"/>
    </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            src: ''
        }
    },
    methods: {
        changeHandle(event) {
            let file = event.target.files[0]
            let fileReader = new FileReader()
            fileReader.readAsArrayBuffer(file)

```

--------------------------------

### Common Request Options

Source: https://context7.com/501351981/vue-office/llms.txt

Configuration for document requests, passed to fetch/pdfjs. Supports custom headers and credentials.

```javascript
// Vue 组件用法
const requestOptions = {
  headers: {
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9...', 
    'X-Tenant-Id': 'tenant-001'
  },
  withCredentials: true  // 跨域携带 Cookie
}

// PDF 组件额外支持直接在 options 中配置：
const pdfOptions = {
  httpHeaders: { Authorization: 'Bearer token' },
  withCredentials: true,
  password: 'pdf-password'  // 加密文档密码
}
```

--------------------------------

### Preview Docx File from Upload (Element UI)

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/guide/index.html

Preview a docx file uploaded via Element UI's el-upload component. The file is read as an ArrayBuffer in the beforeUpload hook and passed to the VueOfficeDocx component's src prop.

```vue
<template>
    <div id="docx-demo">
        <el-upload
            :limit="1"
            :file-list="fileList"
            accept=".docx"
            :beforeUpload="beforeUpload"
            action=""
        >
            <el-button size="small" type="warning">点击上传</el-button>
        </el-upload>
        <vue-office-docx :src="src"/>
    </div>
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

export default {
    components: {
        VueOfficeDocx
    },
    data() {
        return {
            src: '',
            fileList: []
        }
    },
    methods: {
        //在beforeUpload中读取文件内容
        beforeUpload(file) {
            let reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = (loadEvent) => {
                let arrayBuffer = loadEvent.target.result;
                this.src = arrayBuffer
            };
            return false
        }
    }
}
</script>
```

--------------------------------

### DOCX Preview Options

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/config/index.html

Configure DOCX preview behavior with various boolean flags to control rendering aspects like width, height, fonts, and page breaks.

```typescript
{
    className: string = "docx", //class name/prefix for default and document style classes
    inWrapper: boolean = true, //enables rendering of wrapper around document content
    ignoreWidth: boolean = false, //disables rendering width of page
    ignoreHeight: boolean = false, //disables rendering height of page
    ignoreFonts: boolean = false, //disables fonts rendering
    breakPages: boolean = true, //enables page breaking on page breaks
    ignoreLastRenderedPageBreak: boolean = false, //disables page breaking on lastRenderedPageBreak elements
    experimental: boolean = false, //enables experimental features (tab stops calculation)
    trimXmlDeclaration: boolean = true, //if true, xml declaration will be removed from xml documents before parsing
    useBase64URL: boolean = false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
    useMathMLPolyfill: boolean = false, //includes MathML polyfills for chrome, edge, etc.
    showChanges: false, //enables experimental rendering of document changes (inserions/deletions)
    debug: boolean = false, //enables additional logging
    }
```

--------------------------------

### request-options

Source: https://github.com/501351981/vue-office/blob/master/examples/docs/config/index.html

If the 'src' property is a URL, this object allows you to configure fetch options, such as headers, for requesting the document.

```APIDOC
## request-options

### Description
If the 'src' property is a URL, this object allows you to configure fetch options, such as headers, for requesting the document.

### Type
Object
```