前端 PDF 预览本领：标签 vs 插件，如何优雅地展示 PDF 文件 - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<div>
<iframe
src="https://s4.aconvert.com/convert/p3r68-cdx67/agb6w-9i4xt.pdf"
width="100%"
height="700"
/>
</div>
</template>

复制代码

<template>
<div>
<embed
src="https://s4.aconvert.com/convert/p3r68-cdx67/abeub-nb503.pdf"
type="application/pdf"
width="100%"
height="700"
/>
</div>
</template>

复制代码

npm install --save vue-pdf

复制代码

npm install --save vue-pdf
@4.2.0

复制代码

<template> <pdf src="https://s4.aconvert.com/convert/p3r68-cdx67/a0jo0-a0e3v.pdf"></pdf></template><script>import pdf from "vue-pdf";
export default {
components: {
pdf,
},
};
</script>

复制代码

<template> <pdf src="../../../static/ceshi.pdf"></pdf></template><script>import pdf from "vue-pdf";
export default {
components: {
pdf,
},
};
</script>

复制代码

<template>
<div id="document">
<div class="component" v-show="schedule === 1">
<div @click="pageWay('first')" class="headTail">首页</div>
<div @click="rotateWay('obey')" class="headTail">
<el-tooltip
class="item"
effect="dark"
content="顺时针旋转"
placement="top"
>
<i style="font-size: 18px" class="el-icon-refresh-right"></i>
</el-tooltip>
</div>
<div
@click="pageWay('pre')"
class="fluctuatePage"
:style="pageNumber === 1 ? 'cursor: not-allowed;' : ''"
>
上一页
</div>
<div class="pagination">
<input
v-model.number="pageNumber"
type="number"
class="inputNumber"
@input="inputEvent()"
/>
<span> / {{ pageValue }}</span>
</div>
<div
@click="pageWay('next')"
class="fluctuatePage"
:style="pageNumber === pageValue ? 'cursor: not-allowed;' : ''"
>
下一页
</div>
<div @click="rotateWay('contrary')" class="headTail">
<el-tooltip
class="item"
effect="dark"
content="顺时针旋转"
placement="top"
>
<i style="font-size: 18px" class="el-icon-refresh-left"></i>
</el-tooltip>
</div>
<div @click="pageWay('last')" class="headTail">尾页</div>
</div>
<div class="pdfContent">
<pdf
:src="pdfUrl"
ref="pdf"
v-show="schedule === 1"
:rotate="pageRotate"
:page="pageNumber"
@num-pages="pageValue = $event"
@progress="schedule = $event"
@page-loaded="pageNumber = $event"
@loaded="loadPdfHandler"
@link-clicked="pageNumber = $event"
id="pdfID"
></pdf>
</div>
<div class="progress" v-show="schedule !== 1">
<el-progress
type="circle"
:width="60"
color="#53a7ff"
:percentage="Math.floor(schedule * 100)"
></el-progress>
<p>{{ loadingTxt }}</p>
</div>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
components: {
pdf,
},
data() {
const loadingText = "加载文件中，文件较大请耐心等待...";
return {
remindText: {
loading: loadingText, // 加载中提示语
refresh: "若卡住不动，可刷新页面重新加载...", // 刷新提示语
},
loadingTxt: loadingText, // 初始加载提示语
pageRotate: 0, //旋转角度
pageNumber: 0, // 当前页数
pageValue: 0, // 总页数
schedule: 0, // 加载进度
timerId: "", // 定时器 ID
pdfUrl: "https://s4.aconvert.com/convert/p3r68-cdx67/a2mdb-i5v70.pdf", // pdf 文件路径
};
},
// 在组件销毁时清除定时器
destroyed() {
clearInterval(this.timerId);
},
mounted() {
this.prohibit();
this.timerId = setInterval(() => {
// 设置定时器，每隔一段时间切换加载提示语
this.loadingTxt === this.remindText.refresh
? (this.loadingTxt = this.remindText.loading)
: (this.loadingTxt = this.remindText.refresh);
}, 4000);
this.listenerFunction(); // 调用监听滚动条事件的方法
},
methods: {
// 监听输入事件
inputEvent() {
// 输入页数大于总页数时，设置为总页数，输入页数小于 1 时，设置为 1
this.pageNumber = Math.max(1, Math.min(this.pageNumber, this.pageValue));
},
// 上一页、下一页、首页、尾页事件
pageWay(val) {
if (val === "pre" && this.pageNumber > 1) {
this.pageNumber--; // 上一页
} else if (val === "next" && this.pageNumber < this.pageValue) {
this.pageNumber++; // 下一页
} else if (val === "first") {
this.pageNumber = 1; // 首页
} else if (val === "last" && this.pageNumber < this.pageValue) {
this.pageNumber = this.pageValue; // 尾页
}
this.toTop(); // 滚动到顶部
},
// 顺/逆旋转
rotateWay(val) {
this.pageRotate += val === "obey" ? 90 : -90;
},
// 滚动顶部
toTop() {
const container = document.getElementById("document").parentElement;
container.scrollIntoView({ behavior: "smooth", block: "start" });
},
// 监听 pdf 加载完成事件
loadPdfHandler() {
this.pageNumber = 1; // 加载 pdf 时，设置当前页数为 1
},
// 禁止特定的操作
prohibit() {
// 禁用右键菜单
document.oncontextmenu = function () {
return false;
};
// 禁用按键
document.onkeydown = function (e) {
// 定义需要禁用的按键码数组
const forbiddenKeys = [65, 67, 73, 74, 80, 83, 85, 86, 117, 18, 123];
// 判断按下的按键是否在禁用数组中，如果是则返回 false 禁用按键
if (e.ctrlKey && forbiddenKeys.includes(e.keyCode)) {
return false;
}
};
},
// 监听滚动条事件
listenerFunction(e) {
document
.getElementById("document")
.addEventListener("scroll", function (event) {
// 监听滚动事件
console.log(event);
});
},
},
};
</script>
<style scoped lang="less">
#document {
overflow: auto;
min-height: 100vh;
width: 100%;
display: flex;
position: relative;
.component {
user-select: none;
color: #ffffff;
position: fixed;
bottom: 5%;
left: 50%;
margin-left: -250px;
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(0, 0, 0, 0.7);
border-radius: 30px;
width: 420px;
padding: 15px 40px;
z-index: 99;
.pagination {
position: relative;
top: 1px;
.inputNumber {
border-radius: 5px;
border: 1px solid #8b8b8b;
width: 36px;
height: 16px;
text-align: center;
background: transparent;
}
.inputNumber:focus {
border: 1px solid #00aeff;
background: rgba(18, 163, 230, 0.1);
outline: none;
transition: 0.2s;
}
}
.headTail {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.fluctuatePage {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.fluctuatePage:hover,
.headTail:hover {
transition: 0.3s;
color: #409eff;
cursor: pointer;
}
}
.pdfContent {
width: 100%;
}
.progress {
width: 222px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -111px;
text-align: center;
}
.progress p {
color: #199edb;
font-size: 14px;
}
}
/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
/*在firefox下移除input[number]的上下箭头*/
input[type="number"] {
-moz-appearance: textfield;
}
</style>

复制代码

// 设置打印分辨率为 150dpi，打印第1页和第3页
this.$refs.myPdfComponent.print(150, [1, 3]);

复制代码

<template>
<div>
<button @click="printPdf">打印 pdf</button>
<pdf ref="myPdfComponent" :src="pdfSrc"></pdf>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
components: {
pdf,
},
data() {
return {
pdfSrc: "https://s4.aconvert.com/convert/p3r68-cdx67/a1eqq-4rahm.pdf",
};
},
};
</script>

复制代码

<template>
<pdf :src="pdfUrl" @password="handlePassword" />
</template>
<script>
import pdf from "vue-pdf";
export default {
components: {
pdf,
},
data() {
return {
pdfUrl: "https://s4.aconvert.com/convert/p3r68-cdx67/a9tag-qf2jw.pdf",
};
},
methods: {
handlePassword(updatePassword, reason) {
if (reason === "NEED_PASSWORD") {
// 这里可以提示用户输入密码，然后使用输入的密码来更新PDF文档
let password = prompt("请输入PDF文档的密码:", "");
updatePassword(password);
}
},
},
};
</script>

复制代码

<template>
<pdf :src="pdfUrl" />
</template>
<script>
import pdf from "vue-pdf";
export default {
components: {
pdf,
},
data() {
return {
pdfUrl: "",
};
},
methods: {
getPdfPort() {
// 解析 PDF
const taskData = pdf.createLoadingTask({
url: res.data,
cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
cMapPacked: true,
});
// 把解析后的地址进行赋值
this.pdfUrl = taskData;
},
},
};
</script>

复制代码

<template>
<div>
<button @click="pdfWay">预览pdf</button>
<iframe :src="item.iframeUrl" width="100%" height="550" />
</div>
</template>
<script>
export default {
data() {
return {
iframeUrl: "",
};
},
methods: {
pdfWay() {
previewPort().then((res) => {// 接口方法
var binaryData = [];
binaryData.push(res);
this.iframeUrl = window.URL.createObjectURL(
new Blob(binaryData, { type: "application/pdf" })
);
});
},
},
};
</script>

复制代码