1. Download the pdf.js library file
Go to the official website of pdf.js to download the library file. You can download any version. The latter is suitable for older browsers, so I downloaded the latter.
After the download was completed, due to the limitations of WeChat applet packaging, I put the library file in the backend system of the project. It is more convenient to process it on the h5 side than on the applet side. Finally, I just used the web-view tag to embed it into the applet. ;
2. Import the downloaded pdf.js into the h5 project
2.1. Directory structure
2.2. Use pdf.js on h5 side
Create a new folder->Create a new .vue file to display the pdf file->Use the iframe tag to accept the pdf file and
run it to open the default pdf file, which proves the success.
pdf.vue
<template>
<!-- pdf详情页 -->
<div>
<iframe :src="../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html" width="100%" height="700px;"></iframe>
</div>
</template>
<script >
import {
useRouter } from "vue-router";
export default {
name: 'pdf',
setup() {
document.title = 'pdf详情页' // 修改本页面网页标题
const route = useRouter()
return {
}
}
}
</script>
<style>
</style>
Note: The following error may occur. Just find viewer.html and change the type of the script tag to module.
Then run the project. If this page can open the default pdf file, it proves successful.
2.3. Embed into mini program
<template>
<!-- pdf详情页 -->
<div>
<iframe :src="file" width="100%" height="700px;"></iframe>
</div>
</template>
<script >
import {
useRouter } from "vue-router";
export default {
name: 'pdf',
setup() {
document.title = 'pdf详情页' // 修改本页面网页标题
const route = useRouter()
console.log(route.currentRoute.value.query.file);
let file = route.currentRoute.value.query.file; // 获取当前url参数
if (file) {
file = `../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html?file=${
file}` // 找到参数则展示指定pdf
} else {
file = '../../../public/pdfjs-3.5.141-legacy-dist/web/viewer.html' // 若没有找到参数，打开默认pdf文件
}
return {
file
}
}
}
</script>
<style>
</style>
Through the parameters passed by the mini program, the h5 end can access the pdf, and use the keyword search that comes with pdf.js to complete the business requirements.
If there is a cross-domain problem, find the following code in the viewer.js file and comment it out.
