//下载依赖包
yarn add pdfh5;
yarn add dommatrix;
yarn add web-streams-polyfill;
//shims-vue.d.ts文件配置
declare module 'pdfh5'
//vue.config.js文件配置
module.exports = {
configureWebpack: {
resolve: {
fallback: {
"canvas": false,
"fs": false,
"http": false,
"https": false,
"url": false,
"zlib": false
}
}
}
}
html代码
<div id="pdf-box" ref="refPdf"></div>
样式代码
#pdf-box {
width: 100%;
height: 100%;
:deep .viewerContainer {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
transition: all .3s
}
}
js
import { ref,onMounted ,nextTick} from "vue";
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
const refPdf = ref(null);
const pdfUrl= './pdf.pdf';
onMounted(()=>{
nextTick(() => {
const pdfh5 = new Pdfh5(refPdf.value, {
pdfurl:pdfUrl,
});
})
})