打印
打印功能允许用户将表格内容打印为纸质文档或导出为 PDF 格式,便于离线查看和分享。
插件模式
安装
pnpm add @univerjs-pro/sheets-printnpm install @univerjs-pro/sheets-printyarn add @univerjs-pro/sheets-printbun add @univerjs-pro/sheets-print使用
import { UniverSheetsPrintPlugin } from '@univerjs-pro/sheets-print'import SheetsPrintPluginZhCN from '@univerjs-pro/sheets-print/locale/zh-CN'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/sheets-print/lib/index.css'const univer = new Univer({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( SheetsPrintPluginZhCN, ), },})univer.registerPlugin(UniverSheetsPrintPlugin)如果你拥有 Univer 的商业许可证,请参考在客户端使用许可证进行配置。
插件与配置
interface IUniverSheetsPrintConfig { /** * 是否强制打印时显示水印 * @default false */ enforceWatermark?: boolean}移动端适配
先配置移动端编辑器。在本页插件模式的初始化代码中,将下列桌面端注册替换为同一个包导出的移动端插件,并在打开文档前完成。保留模型插件、样式、语言包和 Facade 导入,不要同时注册两个版本。
| 来源包 | 桌面端注册 | 移动端注册 |
|---|---|---|
@univerjs-pro/sheets-print | UniverSheetsPrintPlugin | UniverSheetsPrintMobileUIPlugin |
预设模式
打印功能被包含在 @univerjs/preset-sheets-advanced 预设中。
安装
@univerjs/preset-sheets-advanced 的 UniverSheetsAdvancedPreset 预设在运行时依赖 UniverSheetsDrawingPreset
预设,请先安装 @univerjs/preset-sheets-drawing。
pnpm add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancednpm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedyarn add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advancedbun add @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced使用
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedZhCN from '@univerjs/preset-sheets-advanced/locales/zh-CN'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingZhCN from '@univerjs/preset-sheets-drawing/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-drawing/lib/index.css'import '@univerjs/preset-sheets-advanced/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetSheetsCoreZhCN, UniverPresetSheetsDrawingZhCN, UniverPresetSheetsAdvancedZhCN, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsDrawingPreset(), UniverSheetsAdvancedPreset(), ],})如果你拥有 Univer 的商业许可证,请参考在客户端使用许可证进行配置。
预设与配置
interface IUniverSheetsAdvancedPresetConfig { print?: Partial<IUniverSheetsPrintConfig>}interface IUniverSheetsPrintConfig { /** * 是否强制打印时显示水印 * @default false */ enforceWatermark?: boolean}Facade API
引入
import '@univerjs-pro/sheets-print/facade'打开打印配置对话框
使用 FWorkbook.openPrintDialog 可以打开打印配置对话框。
const fWorkbook = univerAPI.getActiveWorkbook()fWorkbook.openPrintDialog()关闭打印配置对话框
使用 FWorkbook.closePrintDialog 方法可以关闭打印配置对话框。
const fWorkbook = univerAPI.getActiveWorkbook()fWorkbook.openPrintDialog()// 3 秒后关闭打印配置对话框setTimeout(() => { fWorkbook.closePrintDialog()}, 3000)更新打印布局配置
使用 FWorkbook.updatePrintConfig(config: ISheetPrintLayoutConfig) 方法更新打印布局配置。
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const subUnitId = fWorksheet.getSheetId()// 更新打印布局配置fWorkbook.updatePrintConfig({ area: univerAPI.Enum.PrintArea.CurrentSheet, // 打印当前工作表 subUnitIds: [subUnitId], paperSize: univerAPI.Enum.PrintPaperSize.A4, // A4 纸张大小 scale: univerAPI.Enum.PrintScale.FitPage, // 使内容适应页面 freeze: [univerAPI.Enum.PrintFreeze.Row], // 冻结行标题 margin: univerAPI.Enum.PrintPaperMargin.Normal, // 正常边距 // ... 其他设置})// 开始打印fWorkbook.print()完整配置类型和参数请参阅 FWorkbook.updatePrintConfig().
更新打印渲染配置
使用 FWorkbook.updatePrintRenderConfig(config: ISheetPrintRenderConfig) 方法更新打印渲染配置。
const fWorkbook = univerAPI.getActiveWorkbook()// 更新默认打印布局配置fWorkbook.updatePrintConfig({})// 更新打印渲染配置fWorkbook.updatePrintRenderConfig({gridlines: true, // 显示网格线hAlign: univerAPI.Enum.PrintAlign.Middle, // 水平居中对齐vAlign: univerAPI.Enum.PrintAlign.Middle, // 垂直居中对齐headerFooter: [ // 要包含的页眉和页脚元素数组,这里是页码和工作表名称 univerAPI.Enum.PrintHeaderFooter.PageSize, univerAPI.Enum.PrintHeaderFooter.WorksheetTitle,],// ... 其他设置})// 开始打印fWorkbook.print()完整配置类型和参数请参阅 FWorkbook.updatePrintRenderConfig().
调起打印
使用 FWorkbook.print 方法可以直接调起打印。
// 使用默认配置可以传入空对象workbook.updatePrintConfig({// ... 打印布局配置})workbook.updatePrintRenderConfig({// ... 打印渲染配置})workbook.print()保存截图至剪贴板
使用 FWorkbook.saveScreenshotToClipboard 方法可以保存打印数据图片到剪切板。
该 API 仅在拥有 许可证 的情况下可用,未持有许可证时将受到使用限制,保存操作将返回 false。
我们使用 Clipboard API 保存图片到剪贴板,在非安全网络环境或某些不支持的浏览器可能会保存失败。保存成功会返回 true。
const fWorkbook = univerAPI.getActiveWorkbook()const result = await fWorkbook.saveScreenshotToClipboard()获取选区截图
使用 FRange.getScreenshot 方法可以获取选区打印数据图片。
该 API 仅在持有 许可证 时可用,未持证用户将受到使用限制,保存失败时返回 false,成功时返回图片的 base64 字符串。
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:D10')fRange.getScreenshot()fRange.getScreenshot({ includeHeaders: true }) // 包含行列标题事件监听
完整事件类型定义,请查看 Events。
univerAPI.Event.BeforeSheetPrintOpen 事件在打开打印配置对话框之前触发。
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetPrintOpen, (params) => { const { workbook, worksheet } = params // 取消打开打印配置对话框操作 params.cancel = true})// 移除事件监听器,使用 `disposable.dispose()`univerAPI.Event.SheetPrintOpen 事件在打开打印配置对话框之后触发。
const disposable = univerAPI.addEvent(univerAPI.Event.SheetPrintOpen, (params) => { const { workbook, worksheet } = params})// 移除事件监听器,使用 `disposable.dispose()`univerAPI.Event.BeforeSheetPrintConfirm 事件在确认打印之前触发。
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetPrintConfirm, (params) => { const { renderConfig, layoutConfig } = params // 取消打印确认操作 params.cancel = true})// 移除事件监听器,使用 `disposable.dispose()`univerAPI.Event.SheetPrintConfirmed 事件在确认打印之后触发。
const disposable = univerAPI.addEvent(univerAPI.Event.SheetPrintConfirmed, (params) => { const { renderConfig, layoutConfig } = params})// 移除事件监听器,使用 `disposable.dispose()`univerAPI.Event.BeforeSheetPrintCanceled 事件在取消打印之前触发。
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetPrintCanceled, (params) => { const { renderConfig, layoutConfig } = params // 取消打印取消操作 params.cancel = true})// 移除事件监听器,使用 `disposable.dispose()`univerAPI.Event.SheetPrintCanceled 事件在取消打印之后触发。
const disposable = univerAPI.addEvent(univerAPI.Event.SheetPrintCanceled, (params) => { const { renderConfig, layoutConfig } = params})// 移除事件监听器,使用 `disposable.dispose()`你觉得这篇文档如何?