跳过主要内容
@capgo/capacitor-打印机 文件和存储 开源

打印机 Capacitor 插件

Capacitor 打印文档、HTML、PDF、图片和网页视图的插件

安装

bun add @capgo/capacitor-printer bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-printer
  • pnpm add @capgo/capacitor-printer
  • yarn add @capgo/capacitor-printer

指南

如何在Capacitor中使用打印机

在设备上测试

下载Capgo应用,扫描QRcode。

打印机插件预览二维码 code

使用 @capgo/capacitor-printer

Capacitor 打印机插件,用于打印文档、HTML、PDF、图片和网页视图。

安装

bun add @capgo/capacitor-printer
bunx cap sync

此插件暴露的内容

  • printBase64 - 提供打印 UI 以打印以 base64 字符串编码的文件。
  • printFile - 提供打印 UI 以打印设备文件。
  • printHtml - 提供打印 UI 以打印 HTML 文档。
  • printPdf - 提供打印 UI 以打印 PDF 文档。

示例用途

printBase64

提供打印 UI 以打印以 base64 字符串编码的文件。

import { Printer } from '@capgo/capacitor-printer';

// Print a base64 encoded PDF
await Printer.printBase64({
  name: 'Invoice #12345',
  data: 'base64-encoded-pdf-data',
  mimeType: 'application/pdf',
});

// Print a base64 encoded image
await Printer.printBase64({
  name: 'Product Photo',
  data: '/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDA...',
  mimeType: 'image/jpeg',
});

printFile

提供打印 UI 以打印设备文件。

import { Printer } from '@capgo/capacitor-printer';

// iOS: Print from app documents directory
await Printer.printFile({
  name: 'Contract',
  path: 'file:///var/mobile/Containers/Data/Application/.../Documents/contract.pdf',
});

// Android: Print from content URI
await Printer.printFile({
  name: 'Receipt',
  path: 'content://com.android.providers.downloads.documents/document/123',
  mimeType: 'application/pdf',
});

// Android: Print from file path
await Printer.printFile({
  name: 'Photo',
  path: 'file:///storage/emulated/0/Download/photo.jpg',
  mimeType: 'image/jpeg',
});

printHtml

提供打印 UI 以打印 HTML 文档。

import { Printer } from '@capgo/capacitor-printer';

// Simple HTML document
await Printer.printHtml({
name: 'Sales Report',
html: '<html><body><h1>Q4 Sales Report</h1><p>Revenue: $125,000</p></body></html>',
});

// HTML with print-specific CSS
await Printer.printHtml({
name: 'Styled Invoice',
html: `
<html>
<head>
<style>

printPdf

提供打印 UI 以打印 PDF 文档。

import { Printer } from '@capgo/capacitor-printer';

// Print PDF from app storage
await Printer.printPdf({
  name: 'Annual Report 2024',
  path: 'file:///var/mobile/Containers/Data/Application/.../Documents/report.pdf',
});

// Print PDF from Android downloads
await Printer.printPdf({
  name: 'Downloaded Document',
  path: 'content://com.android.providers.downloads.documents/document/123',
});

完整参考

继续使用 @capgo/capacitor-printer

如果您正在使用 使用@capgo/capacitor-打印机 来规划原生插件工作,连接它 @capgo/capacitor-打印机 了解@capgo/capacitor-打印机的实现细节 开始使用 了解开始使用的实现细节 Capgo插件目录 了解Capgo插件目录中的产品工作流程 Capacitor由Capgo提供的插件 了解Capacitor由Capgo提供的插件的实现细节 添加或更新插件 了解添加或更新插件的实现细节

常见问题

打印机插件常见问题

如何在Capacitor应用中安装打印机插件?

运行"bun add @capgo/capacitor-打印机" (或 "npm install @capgo/capacitor-打印机" ),然后运行 "bunx cap sync" 以便 iOS 和 Android 项目捕获 native code。从 "@capgo/capacitor-打印机" 中导入它到你的应用code中。

是否@capgo/capacitor-打印机支持React、Vue和Angular?

是。打印机是一个Capacitor包,支持任何运行在Capacitor中的Web框架,包括Ionic、React、Vue、Angular、Svelte和普通JavaScript。

哪个Capacitor版本支持@capgo/capacitor-打印机?

Capgo插件遵循Capacitor的主要版本:使用与Capacitor主要版本匹配的插件主要版本(例如插件v8与Capacitor 8)。GitHub README中的兼容性表格列出了维护的版本。

是否@capgo/capacitor-打印机免费且开源?

是。code源代码在GitHub上公开,地址为https://github.com/Cap-go/capacitor-打印机/,并且该包从npm中免费安装。欢迎bug报告和拉取请求。

是否可以在App Store没有审核的情况下更新使用打印机的code?

安装或升级插件会改变原生的code,需要重新构建App Store。之后,JavaScript、HTML和CSS的更改可以立即与Capgo的实时更新一起发布。

不必等待应用程序审查就可以将打印机更改交付

一旦插件在您的商店构建中,Capgo 即刻推送您的 JavaScript、HTML 和 CSS 更改给用户。

从 Capgo 开始