vue3移动端嵌入pdf的多种方法小结
作者：朱@
这篇文章主要介绍了vue3移动端嵌入pdf的多种方法小结,使用embed嵌入有好处也有缺点,本文给大家讲解的非常详细,需要的朋友可以参考下
1.使用embed嵌入
好处：简单，代码量少，功能齐全
缺点：有固定样式，难以修改，不可定制
<embed class="embedPdf" :src="pdfurl" type="application/pdf">
2.使用vue-pdf-embed（pdf预览）的形式定制嵌入pdf
优点：除了pdf的内容别的都可以修改，可以定制样式
缺点：要自己手写下载，下一页，上一页等功能
使用vue-pdf-embed插件展示预览pdf（这里只能展示一页，或者不分页全部展示，就会是一长条，所以我们自己做分页。
<div class="vuePdfEmbed">
<VuePdfEmbed
:source="state.source"
:style="scaleFun"
class="vue-pdf-embed"
:page="state.pageNum"
width="700"
/>
<div class="page-tool">
<div class="page-tool-item" @click="lastPage">上一页</div>
<div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
<div class="page-tool-item" @click="nextPage">下一页</div>
<div class="page-tool-item" @click="downloadPDF">下载</div>
</div>
</div>分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数，这个函数是一个异步函数，之后会返回pdf的信息（别的信息基本没用，只有numPages比较有用。）
import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数
const pdfurl = ref("......pdf地址")
const state = reactive({
source: pdfurl, //预览pdf文件地址
pageNum: 1, //当前页面
scale: 1, // 缩放比例
numPages: 0, // 总页数
});
const scaleFun = reactive({
transform:'scale('+state.scale+')'
})
// 获取上一页
function lastPage(){
if(state.pageNum>1){
state.pageNum--
}
}
// 获取下一页
function nextPage(){
if(state.pageNum<state.numPages){
state.pageNum++
}
}
// 下载pdf
function downloadPDF(){
fetch(encodeURI(pdfurl.value)).then(res => {
res.blob().then(myBlob => {
const href = URL.createObjectURL(myBlob);
const a = document.createElement('a');
a.href = href;
a.download = 'report'; // 下载文件重命名
a.click();
a.remove();
});
});
}
onMounted(() => {
// 加载异步任务
const loadingTask = createLoadingTask(state.source);
// 载入pdf后获取页数
loadingTask.promise.then((pdf) => {
state.numPages = pdf.numPages;
});分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数，这个函数是一个异步函数，之后会返回pdf的信息（别的信息基本没用，只有numPages比较有用。）
import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // 获得总页数
const pdfurl = ref("......pdf地址")
const state = reactive({
source: pdfurl, //预览pdf文件地址
pageNum: 1, //当前页面
scale: 1, // 缩放比例
numPages: 0, // 总页数
});
const scaleFun = reactive({
transform:'scale('+state.scale+')'
})
// 获取上一页
function lastPage(){
if(state.pageNum>1){
state.pageNum--
}
}
// 获取下一页
function nextPage(){
if(state.pageNum<state.numPages){
state.pageNum++
}
}
// 下载pdf
function downloadPDF(){
fetch(encodeURI(pdfurl.value)).then(res => {
res.blob().then(myBlob => {
const href = URL.createObjectURL(myBlob);
const a = document.createElement('a');
a.href = href;
a.download = 'report'; // 下载文件重命名
a.click();
a.remove();
});
});
}
onMounted(() => {
// 加载异步任务
const loadingTask = createLoadingTask(state.source);
// 载入pdf后获取页数
loadingTask.promise.then((pdf) => {
state.numPages = pdf.numPages;
});.vuePdfEmbed{
flex: 1;
display: flex;
height: 100%;
flex-direction: column;
}
.vuePdfEmbed{
.page-tool {
padding-left: 15px;
padding-right: 15px;
display: flex;
align-items: center;
background: rgb(66, 66, 66);
color: white;
border-radius: 19px;
z-index: 100;
cursor: pointer;
width: 320px;
align-items: center;
margin: auto;
justify-content: space-around;
}
.page-tool-item {
padding: 8px 15px;
padding-left: 10px;
cursor: pointer;
}
}到此这篇关于vue3移动端嵌入pdf的两种办法的文章就介绍到这了,更多相关vue3移动端嵌入pdf内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！