En primer lugar, hablemos de los requisitos en esta área: envíe el parámetro de identificación correspondiente al fondo para obtener el flujo de archivo pdf relevante de la siguiente manera:
Como nunca he hecho la función de vista previa de pdf, me deslumbró leyendo muchos tutoriales en Internet. Al mismo tiempo, también probé muchos métodos .
Entre ellos, el complemento de descarga del tutorial de Vue vue-pdf satisface mis necesidades de acuerdo con el tutorial del documento y también logra el efecto que deseo, pero el proyecto que hice está escrito de forma puramente nativa por el proyecto anterior anterior, por lo que todavía tengo que mirar el sitio web oficial de pdf.js
Sin más preámbulos, solo hable sobre los pasos en mi proceso:
①: Vaya al sitio web oficial para descargar el paquete https://github.com/mozilla/pdf.js/releases/download/v1.10.88/pdfjs-1.10.88-dist.zip
②: Descomprima el paquete en el directorio del proyecto
③: modificar visor.js
- var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf' //inside es la ruta de PDF para eliminar la definición de variable (comentar)
- Encuentra otras 2080 líneas
var fileOrigin = new URL(file, window.location.href).origin;
if (fileOrigin !== viewerOrigin) {
throw new Error('file origin does not match viewer\'s');
}
- cambie a
if (file && 'byteLength' in file) {
} else{
var fileOrigin = new URL(file, window.location.href).origin;
if (fileOrigin !== viewerOrigin) {
throw new Error('file origin does not match viewer\'s');
}
}
④: Abra viewer.html<script src="viewer.js"></script> y agregue el siguiente código arriba:
<script src="../../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 这里是截取地址栏=后面的参数 可选中其它办法
function getArgsFromHref(sArgName){
// var sHref=window.location.href;
var sHref = location.search;
var args = sHref.split(sArgName+"=");
var retval = "";
//args is null
if(args[0] == sHref){
return retval;
}
var retval = args[1];
return retval;
}
var url_file=getArgsFromHref("url_file");
var DEFAULT_URL = "";//注意，删除的变量在这里重新定义
var PDFData = "";
$.ajax({
type:"post",
async:false,
mimeType: 'text/plain;charset=x-user-defined',
url:url_file,
success:function(data){
PDFData = data;
}
});
var rawLength = PDFData.length;
//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = PDFData.charCodeAt(i) & 0xff;
}
DEFAULT_URL = array;
</script>
⑤ llamada:
El cuadro de página que necesita mostrar el documento pdf
anida el visor.html con iframe
Solicito la siguiente acción en viewer.html:
Efecto de visualización de página:
Nota: Cambie usted mismo el estilo predeterminado para que coincida con el cuerpo de su propio proyecto (la barra de herramientas informa un error en chino : solo tendrá efecto si se implementa en el servidor, puede crear un servidor para verlo usted mismo)