1. pdf.js ライブラリ ファイルをダウンロードします。
pdf.js の公式 Web サイトにアクセスしてライブラリ ファイルをダウンロードします。任意のバージョンをダウンロードできますが、後者は古いブラウザに適しているため、後者をダウンロードしました。
ダウンロードが完了した後、WeChat アプレットのパッケージ化の制限により、ライブラリ ファイルをプロジェクトのバックエンド システムに置きました。アプレット側よりも h5 側で処理した方が便利です。最後に、私はちょうど使用しました; Web ビュー タグを使用してアプレットに埋め込みます。
2. ダウンロードした pdf.js を h5 プロジェクトにインポートします
2.1. ディレクトリ構造
2.2. h5側でpdf.jsを使用する
新しいフォルダーを作成します -> PDF ファイルを表示するための新しい .vue ファイルを作成します -> iframe タグを使用して PDF ファイルを受け入れ、
それを実行してデフォルトの PDF ファイルを開きます。これで成功したことがわかります。
pdf.vue
<template>
<!-- pdf详情页 -->
<div>
<iframe :src="../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html" width="100%" height="700px;"></iframe>
</div>
</template>
<script >
import {
useRouter } from "vue-router";
export default {
name: 'pdf',
setup() {
document.title = 'pdf详情页' // 修改本页面网页标题
const route = useRouter()
return {
}
}
}
</script>
<style>
</style>
注: 次のようなエラーが発生する場合がありますが、viewer.html を見つけて script タグのタイプを module に変更してください。
次にプロジェクトを実行し、このページでデフォルトの PDF ファイルを開くことができれば成功です。
2.3. ミニプログラムへの埋め込み
<template>
<!-- pdf详情页 -->
<div>
<iframe :src="file" width="100%" height="700px;"></iframe>
</div>
</template>
<script >
import {
useRouter } from "vue-router";
export default {
name: 'pdf',
setup() {
document.title = 'pdf详情页' // 修改本页面网页标题
const route = useRouter()
console.log(route.currentRoute.value.query.file);
let file = route.currentRoute.value.query.file; // 获取当前url参数
if (file) {
file = `../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html?file=${
file}` // 找到参数则展示指定pdf
} else {
file = '../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html' // 若没有找到参数，打开默认pdf文件
}
return {
file
}
}
}
</script>
<style>
</style>
ミニ プログラムによって渡されたパラメーターを通じて、h5 側は pdf にアクセスし、pdf.js に付属のキーワード検索を使用してビジネス要件を完了できます。
クロスドメインの問題がある場合は、viewer.js ファイル内で次のコードを見つけてコメント化します。
