UniAppでAndroid端末向けにPDFファイルを表示する主な方法は以下の通りです（簡単から複雑まで）：
方法1：システムデフォルトアプリで開く（シンプルなケース向け）
PDFファイルをダウンロードした後、システムのデフォルトアプリ（WPS、Adobe Readerなど）で開きます。
// ダウンロードしてPDFを開く例
uni.downloadFile({
url: 'https://example.com/document.pdf', // オンラインPDFのURL
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.openDocument({
filePath: downloadRes.tempFilePath, // 一時ファイルパス
fileType: 'pdf',
success: () => console.log('開くことができました'),
fail: (err) => console.error('開けませんでした', err)
});
}
},
fail: (err) => console.error('ダウンロードに失敗', err)
});
長所：ネイティブサポートあり、追加プラグイン不要 短所：他のアプリに遷移する必要がある
方法2：WebViewでオンラインプレビュー（インターネット接続必須）
web-viewコンポーネントを使ってオンラインPDFを表示します（インターネット接続が必要）：
<template>
<web-view :src="previewUrl"></web-view>
</template>
<script>
export default {
data() {
return {
// Googleドキュメントプレビュー（VPNが必要）または国内サービスを使用
previewUrl: 'https://docs.google.com/gview?embedded=true&url=https://example.com/document.pdf'
// 国内サービスの例（各自で置き換えてください）
// previewUrl: 'https://view.xdocin.com/view?src=' + encodeURIComponent('https://example.com/document.pdf')
}
}
}
</script>
注意：GoogleサービスはVPNが必要で、国内ではxdocinなどのオンラインプレビューサービスに置き換えることができます。
方法3：ネイティブPDFプラグインを統合（機能が豊富）
UniAppネイティブプラグインを使ってアプリ内でのプレビューを実現します：
手順：
- プラグインのインストール プラグインマーケットで「PDFプレビュー」プラグインを検索（例）：
- Android向け：
zhangwei-uvue-pdf-viewer（UVUE対応） - 一般的なバージョン：
pdf-viewer
- プラグインの導入 プラグインのドキュメントに従ってネイティブモジュールを設定（一部はオフラインパッケージングが必要）。
- コード例：
<template>
<!-- プラグインのドキュメントに従ってコンポーネントを使用 -->
<pdf-viewer :src="localFilePath"></pdf-viewer>
</template>
<script>
export default {
data() {
return {
localFilePath: '' // ローカルファイルパス
}
},
mounted() {
// ファイルをローカルにダウンロード
uni.downloadFile({
url: 'https://example.com/document.pdf',
success: (downloadRes) => this.localFilePath = downloadRes.tempFilePath
});
}
}
</script>
方法4：PDF.jsでカスタムレンダリング（純粋なフロントエンド）
pdf.jsを使ってH5や一部のAndroid端末で純粋なフロントエンドレンダリングを実現します：
<template>
<view>
<canvas v-for="pageIndex in pageCount" :id="'canvas-'+pageIndex" :key="pageIndex"></canvas>
</view>
</template>
<script>
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/build/pdf.worker.entry';
export default {
data() {
return {
pdfDocument: null,
pageCount: 0
}
},
async mounted() {
const loadingTask = pdfjsLib.getDocument('https://example.com/document.pdf');
this.pdfDocument = await loadingTask.promise;
this.pageCount = this.pdfDocument.numPages;
// 各ページをレンダリング
for (let pageIndex = 1; pageIndex <= this.pageCount; pageIndex++) {
const page = await this.pdfDocument.getPage(pageIndex);
const canvas = document.getElementById(`canvas-${pageIndex}`);
const viewport = page.getViewport({ scale: 1.5 });
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: canvas.getContext('2d'),
viewport
});
}
}
}
</script>
注意：
pdfjs-distの依存関係を追加：npm install pdfjs-dist- 大きなファイルではパフォーマンスが低下する可能性があるため、ページごとのロードを推奨します。