メインコンテンツにジャンプ

ガイド

プリンタ用チュートリアル

デバイスでテスト

Download the Capgo app, then scan the QR code.

プリンタープラグインのプレビューQR code

@capgo/capacitor-プリンタープラグインを使用

Capacitor プラグインは、ドキュメント、HTML、PDF、画像、ウェブビューを印刷するために使用されます。

インストール

bun add @capgo/capacitor-printer
bunx cap sync

このプラグインが公開するもの

  • printBase64 - base64 でエンコードされたファイルを印刷するための印刷UIを表示します。
  • printFile - デバイスファイルを印刷するための印刷UIを表示します。
  • printHtml - HTML ドキュメントを印刷するための印刷UIを表示します。
  • printPdf - PDF ドキュメントを印刷するための印刷UIを表示します。

例の使用

printBase64

base64 でエンコードされたファイルを印刷するための印刷UIを表示します。

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から続けて@capgo/capacitor-printerを使用します。

__CAPGO_KEEP_0__を使用していて capgo/capacitor-printerを使用しています。 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-printerを使用してnativeプラグインの作業を計画する場合、__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-printerに接続します。 capgo/capacitor-printerを使用して Capacitor プリンタ用プラグインの実装詳細については @capgo/capacitor-printer に Getting Started Capacitor プリンタ用プラグインの実装詳細については Getting Started に Capgo プラグインディレクトリ Capacitor プリンタ用プラグインの製品ワークフローについては Capgo プラグインディレクトリ に Capacitor プラグインの Capgo による Capacitor プリンタ用プラグインの実装詳細については Capacitor プラグインの Capgo による、 プラグインの追加または更新 Capacitor プリンタ用プラグインの実装詳細については プラグインの追加または更新 に