安裝依賴
npm i vue-pdf-embed頁面結構
<vue-pdf-embed
:source="state.source"
:style="scaleFun"
:page="state.pageNum"
@rendered="pdfRendered"
@rendering-failed="pdfRendered"
/>使用
<script setup lang="ts">
import VuePdfEmbed from 'vue-pdf-embed';
const state = ref({
source: 'https://www.test.com/pdf/test.pdf', // 預覽pdf文件地址
pageNum: 1, // 當前頁面
scale: 1, // 縮放比例
numPages: 0 // 總頁數
});
// pdf樣式
const scaleFun = computed(() => {
return {
width: '70vh', //按照pdf大約7：10的寬高比，對應80vh的高度，直接設置高度不生效
// height: "80vh",
transform: `scale(${state.value.scale})`
};
});
// 由於pdf資源加載是需要時間的的，可以給一個loading，可以手動在彈窗里加一個loading
const pdfLoading = ref(false);
const pdfRendered = () => {
// pdf加載完
pdfLoading.value = false;
};
</script>適用於彈窗直接預覽PDF的場景，你可以在彈窗事件裏替換url鏈接
const onOpen = () => {
open.value = true;
pdfLoading.value = true;
state.value.source = 'https://www.test.com/pdf/測試文檔.pdf'
}
參考資料：
npm：https://www.npmjs.com/package/vue-pdf-embed
github：https://github.com/hrynko/vue-pdf-embed
