pdfjs-dist实现pdf⽂件预览效果如图：
image.png
1.安装
npm i pdfjs-dist
2.使⽤
// pdf.vue
<template>
<div class="wrap" v-loading="isLoading">
<div class="pdf-container">
<canvas ref="watermark" class="watermark"></canvas>
<canvas ref="myCanvas"></canvas>
</div>
<div class="pdf-control">
<div class="pdf-control-page">
<img src="@asts/img/cloud/left.png" @click="prev" />
<span class="page-number-container">
<input
type="number"
v-model="pageNum"
class="page-number-input"
class="page-number-input"
@blur="queueRenderPage(pageNum)"
/>
/
{{ pageCount }}页
</span>
<img src="@asts/img/cloud/right.png" @click="next" />
</div>
<div class="pdf-control-zoom">
<img class="zoom-out" src="@asts/img/cloud/zoomOut.png" @click="minus" /> <img src="@asts/img/cloud/zoomIn.png" @click="addscale" />
</div>
</div>
</div>
</template>
<script>
import pdfJS from "pdfjs-dist";
export default {
data() {
return {
isLoading: fal,
pdfUrl: "", // PDF的ba64
pdfDoc: null, // pdfjs ⽣成的对象
pageNum: 0, // 当前页数
pageRendering: fal,
pageNumPending: null,
scale: 1, // 放⼤倍数
page_num: 0, // 当前页数
pageCount: 0, // 总页数
maxscale: 5, // 最⼤放⼤倍数
minscale: 0.3, // 最⼩放⼤倍数
waterInfo: {}
};
},
computed: {
docid() {
return this.$route.query.docid;
}
},
async created() {
this.isLoading = true;
this.waterInfo = WaterInfo()
if (able) {
}
},
methods: {
// 获取⽔印信息
async getWaterInfo() {
return this.$WaterInfo()
},
// 获取⽂件
getCloudFilePreviewoss() {
return this.$axios.post("cloud_disk/file/previewoss", {
docid: this.docid
});
},
async getPreviewossUrl() {
const res = CloudFilePreviewoss();
立刻约
if (de == 10000) {
} el {
this.isLoading = fal;
this.isError = true;
< = res.msg;
}
},
getBlob(result) {
this.$axios
.get(
童话故事背景音乐
result.previewUrl,
{ responType: "blob" },
{
{
headers: {
"Access-Control-Allow-Origin": "*",
},
}
)
.then((res) => {
var blob = new Blob([res], {
type: "application/pdf;chartt=UTF-8",
});
let fileURL= ateObjectURL(blob)
this.pdfUrl = fileURL
this.init()
})
.catch((error) => {
this.isLoading = fal;
console.log("error", error);
});
},
/
/ ⽔印模板
createWatermarkTemplate() {
const width = 250 * this.scale,
height = 250 * this.scale;
const canvas = this.$refs.watermark;
canvas.width = width;
canvas.height = height;
const ctx = Context("2d"); //返回⼀个⽤于在画布上绘图的环境 ctx.scale(this.scale, this.scale);
ctx.clearRect(0, 0, width, height); //绘制之前画布清除
ctx.fillStyle = "rgba(100,100,100,0.1)";
ctx.font = "24px ⿊体";
ctx.fillText(t, -10, 130);
ctx.font = "18px ⿊体";
ctx.fillText(this.waterInfo.name + this.waterInfo.urAccount, -10, 160); ctx.fillText(this.waterInfo.time, -10, 190);
},
// 初始化pdf
init() {
this.isLoading = fal;
this.pdfDoc = pdfDoc_;
this.pageCount = this.pdfDoc.numPages;
this.pageNum = 1;
赏花灯作文
});
},
// 渲染pdf
renderPage(num) {滑板哪个牌子好
this.pageRendering = true;
let canvas = this.$Canvas;
// Using promi to fetch the page
Page(num).then( (page)=> {
人物描写句子
var viewport = Viewport(this.scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
let ctx = Context("2d")
var renderContext = {
canvasContext: ctx,
viewport: viewport,
};
var renderTask = der(renderContext);
renderTask.promi.then( ()=> {
ctx.fillStyle = atePattern(
this.$refs.watermark,
"repeat"
);
ctx.fillRect(0, 0, canvas.width, canvas.height);
this.pageRendering = fal;
if (this.pageNumPending !== null) {
}
});
});
},
// 放⼤
addscale() {
if (this.scale >= this.maxscale) {多大的宝宝可以喝酸奶
return;
}
this.scale += 0.1;
this.queueRenderPage(this.pageNum);
},
// 缩⼩中山大学高考分数线
minus() {
if (this.scale <= this.minscale) {
return;
}
this.scale -= 0.1;
this.queueRenderPage(this.pageNum);
},
// 上⼀页
prev() {
if (this.pageNum <= 1) {
return;
}
this.pageNum--;
this.queueRenderPage(this.pageNum);
},
// 下⼀页
next() {
if (this.pageNum >= this.pageCount) {
return;
}
this.pageNum++;
this.queueRenderPage(this.pageNum);
},
queueRenderPage(num) {
var number = Number(num);
if (this.pageRendering) {
this.pageNumPending = number;
} el {
}
},
},
};
</script>
<style scoped>
.wrap {
background-color: #fff !important;
display: flex;
flex-direction: column;
.pdf-container {
flex: 1;
overflow: auto;
text-align: center;
background-color: rgba(0,0,0,0.2);
.watermark {
电脑怎么解压文件
display: none;
}
}
.pdf-control {
padding: 0px 16px;
height: 50px;
line-height: 50px;
background: rgba(103, 103, 103, 1);
display: flex;
justify-content: space-between;
font-size: 14px;
color: #fff;
img {
