1. Descargue el archivo de la biblioteca pdf.js
Vaya al sitio web oficial de pdf.js para descargar el archivo de la biblioteca. Puede descargar cualquier versión. Esta última es adecuada para navegadores más antiguos, así que descargué esta última.
Una vez completada la descarga, debido a las limitaciones del empaquetado del subprograma WeChat, puse el archivo de la biblioteca en el sistema backend del proyecto. Es más conveniente procesarlo en el lado h5 que en el lado del subprograma. Finalmente, solo usé la etiqueta web-view para incrustarla en el subprograma. ;
2. Importe el pdf.js descargado al proyecto h5
2.1 Estructura del directorio
2.2 Utilice pdf.js en el lado h5
Cree una nueva carpeta -> Cree un archivo .vue para mostrar el archivo pdf -> Use la etiqueta iframe para aceptar el archivo pdf y
ejecútelo para abrir el archivo pdf predeterminado, lo que demuestra el éxito.
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>
Nota: Puede producirse el siguiente error. Simplemente busque elviewer.html y cambie el tipo de etiqueta de secuencia de comandos a módulo.
Luego ejecute el proyecto. Si esta página puede abrir el archivo pdf predeterminado, resulta exitoso.
2.3 Incrustar en el mini programa
<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>
A través de los parámetros pasados por el mini programa, el extremo h5 puede acceder al pdf y utilizar la búsqueda de palabras clave que viene con pdf.js para completar los requisitos comerciales.
Si hay un problema entre dominios, busque el siguiente código en el archivo Viewer.js y coméntelo.
