メインコンテンツへスキップ
@capgo/capacitor-printer ファイルとストレージ オープンソース

プリンター Capacitor プラグイン

ドキュメント、HTML、PDF、画像、Webビューを印刷するためのCapacitorプラグイン

インストール

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 で Printer を使う方法

実機でテストする

Capgo アプリをダウンロードして、QR code をスキャンしてください。

Printerプラグインのプレビュー用QR code

@capgo/capacitor-printer を使用

ドキュメント、HTML、PDF、画像、Webビューを印刷するための Capacitor プラグイン。

インストール

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

HTMLドキュメントを印刷するための印刷UIを表示します。

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

PDFドキュメントを印刷するための印刷UIを表示します。

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-printer の使用方法 ネイティブプラグインの作業を計画するには、次と連携してください: @capgo/capacitor-printer @capgo/capacitor-printer の実装詳細については、 スタートガイド スタートガイドの実装詳細については、 Capgo プラグインディレクトリ Capgo プラグインディレクトリのプロダクトワークフローについては、 Capgo による Capacitor プラグイン Capgo による Capacitor Plugins の実装詳細、および プラグインの追加または更新 Adding or Updating Plugins の実装詳細を参照してください。

よくある質問

Printer プラグイン FAQ

Capacitor アプリに Printer プラグインをインストールするには?

"bun add @capgo/capacitor-printer" (または "npm install @capgo/capacitor-printer") を実行した後、"bunx cap sync" を実行して、iOS および Android プロジェクトにネイティブの code を反映させます。アプリの code から "@capgo/capacitor-printer" をインポートしてください。

@capgo/capacitor-printer は React、Vue、Angular で動作しますか?

はい。Printer は Capacitor パッケージであるため、Ionic、React、Vue、Angular、Svelte、およびプレーンな JavaScript など、Capacitor 上で動作するあらゆる Web フレームワークで使用可能です。

@capgo/capacitor-printer はどの Capacitor バージョンをサポートしていますか?

Capgo プラグインは Capacitor のメジャーバージョンに合わせています。使用している Capacitor のメジャーバージョンに一致するプラグインのメジャーバージョンを使ってください (例: Capacitor 8 ならプラグイン v8)。GitHub の README にある互換性テーブルに、メンテナンス中のバージョンが記載されています。

@capgo/capacitor-printer は無料のオープンソースですか?

はい。code のソースコードは GitHub の https://github.com/Cap-go/capacitor-printer/ で公開されており、パッケージは npm から無料でインストールできます。バグ報告やプルリクエストも歓迎しています。

App Store の審査なしで、Printer を使用している code をアップデートできますか?

プラグインのインストールやアップグレードはネイティブの code を変更するため、新しいストアビルドが必要です。その後は、プラグインを呼び出す JavaScript、HTML、CSS の変更を Capgo Live Updates で即座に配信できます。

アプリの審査を待たずに、プリンター関連の変更をリリース

プラグインをストア用ビルドに組み込めば、Capgo live updates で JavaScript、HTML、CSS の変更を数分でユーザーに配信できます

Capgo から始める