vue3移动端嵌入pdf的两种办法

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;}
}