シリーズ記事の目次
[Vue] vue2 プレビューは Quill リッチ テキスト コンテンツを表示し、vue-quill-editor はページをエコーし、v-html はリッチ テキスト コンテンツをエコーします [Vue] vue2 プロジェクトはスワイパー カルーセル チャートを使用します 2023 年 8 月 21 日 実践的な乳母レベルのチュートリアル [Vue ]vue2 の
使用
法pdfjs で PDF ファイルをプレビューする、オンライン プレビュー方法 1、pdfjs ファイル パッケージで新しいウィンドウが開き、PDF ファイルをプレビューする
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
記事ディレクトリ
序文
参考記事1：vueでのpdfプレビューのフロントエンド実装（vue-pdfプラグインの使い方含む）
参考記事2 ：vueでvue-pdfを使ってpdfのページングプレビューとスケーリングを実装（pdfプレビューが不鮮明な問題を解決できる） ）
最初に参考記事を読んでから、私の記事を見てください。この著者は簡潔かつラフで、すぐに使用できます。私が書いたものは主に初心者向けですが、プレビューのみです。前の記事に切り替える必要がある場合
は、ページまたは次のページの参考記事をお読みください。
提示：以下是本篇文章正文内容，下面案例可供参考
1.vue-pdfをダウンロード
公式ウェブサイトのアドレスポータル
npm install vue-pdf -S
2. 利用手順
1. ページを作成する
ファイルをプレビューするには vue ページが必要ですが、同時にパラメータは URL アドレスを介して渡されます。
ビューの下に名前を付けたフォルダーを作成しますviewPDF
2. ルーティングを設定する
コードは次のとおりです（例）。
{
path: '/viewPDF',
name: 'viewPDF',
component: () => import('../views/viewPDF/index.vue'),
meta: {
title: "预览pdf文件"
},
}
パスの例は次のとおりです
http://192.168.0.6:9000/viewPDF?filePath=ファイル パス
私のファイルパスは
/profile/upload/2023/09/12/薬学総合実験講義録_20230912100721A002.pdfです。
在路径上，不需要去拼接/dev-api
この継ぎ合わせはこのページで行われます。
3. ページの書き込み (デフォルトは複数ページ)
コードがシンプルなので
分割せずに全部貼り付けて置き換えるだけです。
<template>
<div>
<pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: "vinit",
components: {
pdf
},
data() {
return {
pdfUrl: '',
numPages: undefined,
}
},
computed: {
// 当前页面链接 http://192.168.0.6:9000/viewPDF?filePath=测试.pdf
// return http://192.168.0.6:9000
trimmedUrl() {
// 完整的URL
const fullUrl = window.location.href;
// 使用URL对象来解析URL
const urlObject = new URL(fullUrl);
// 获取截取后的域名和端口号部分
const trimmedUrl = `${
urlObject.protocol}//${
urlObject.host}`;
return trimmedUrl;
}
},
watch: {
},
filters: {
},
created() {
},
mounted() {
this.getTotal()
},
methods: {
// 获取pdf总页数
getTotal() {
// 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据
let loadingTask = this.trimmedUrl + process.env.VUE_APP_BASE_API + this.$route.query.filePath
// 需要使用下述方法的返回值作为url
this.pdfUrl = pdf.createLoadingTask(loadingTask)
// 获取页码
this.pdfUrl.promise.then(pdf => {
this.numPages = pdf.numPages;
}).catch(error => {
})
}
},
}
</script>
4. 単一ページの PDF プレビュー
基本的な使い方
要約する
公式 Web サイトのポータルを表示するその他の方法