uniapp 部署h5,pdf预览

1.hubuilderx 打包h5。

2.上传部署包到服务器。

解压部署包:unzip h5.zip 。

3.nginx配置。

javascript 复制代码
user  root;
worker_processes  1;
#worker_cpu_affinity 0001 0010 0100 1000;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
error_log  /var/log/nginx/error.log  info;
 
pid        /run/nginx.pid;
 
 
events {
    use epoll;
    worker_connections  65535;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format log_access '$remote_addr - $remote_user [$time_local] "$request" $http_host '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for" '
                          '"$upstream_addr" "$upstream_status" $upstream_cache_status "$upstream_http_content_type" "$upstream_response_time" > $request_time ' ;

    server_tokens off;
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;

    client_body_timeout  20;
    client_header_timeout 20;
    keepalive_timeout  3000;
    send_timeout       20;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types       text/plain application/x-javascript text/css application/xml application/javascript  application/octet-stream;
    gzip_vary on;

    server {
        listen       9527;
        server_name  localhost 109.29.219.139;

        location /h5 {
           alias  /home/app/exam/h5/;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html =404;
        }

        location /static {
           root  /home/app/exam/h5;
        }
        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
           root   html;
        }
    }
}

4.启动docker容器。

javascript 复制代码
docker run --name exam_h5_nginx  -p 9527:9527   -d -v /usr/local/nginx/conf/exam_h5_nginx.conf:/etc/nginx/nginx.conf -v /home/app:/home/app nginx

5.至此已部署完成,访问发现预览pdf时报错。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec。

原因为pdfjs中的mjs文件无法识别返回了默认类型"application/octet-stream"。导致无法预览pdf。

6.问题解决。

增加mjs 到javascript类型。

vim /usr/local/nginx/conf/exam_h5_mime.types

javascript 复制代码
types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js mjs;
    application/atom+xml                             atom;
    application/rss+xml                              rss;

    text/mathml                                      mml;
    text/plain                                       txt;
    text/vnd.sun.j2me.app-descriptor                 jad;
    text/vnd.wap.wml                                 wml;
    text/x-component                                 htc;

    image/avif                                       avif;
    image/png                                        png;
    image/svg+xml                                    svg svgz;
    image/tiff                                       tif tiff;
    image/vnd.wap.wbmp                               wbmp;
    image/webp                                       webp;
    image/x-icon                                     ico;
    image/x-jng                                      jng;
    image/x-ms-bmp                                   bmp;

    font/woff                                        woff;
    font/woff2                                       woff2;

    application/java-archive                         jar war ear;
    application/json                                 json;
    application/mac-binhex40                         hqx;
    application/msword                               doc;
    application/pdf                                  pdf;
    application/postscript                           ps eps ai;
    application/rtf                                  rtf;
    application/vnd.apple.mpegurl                    m3u8;
    application/vnd.google-earth.kml+xml             kml;
    application/vnd.google-earth.kmz                 kmz;
    application/vnd.ms-excel                         xls;
    application/vnd.ms-fontobject                    eot;
    application/vnd.ms-powerpoint                    ppt;
    application/vnd.oasis.opendocument.graphics      odg;
    application/vnd.oasis.opendocument.presentation  odp;
    application/vnd.oasis.opendocument.spreadsheet   ods;
    application/vnd.oasis.opendocument.text          odt;
    application/vnd.openxmlformats-officedocument.presentationml.presentation
                                                     pptx;
    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
                                                     xlsx;
    application/vnd.openxmlformats-officedocument.wordprocessingml.document
                                                     docx;
    application/vnd.wap.wmlc                         wmlc;
    application/wasm                                 wasm;
    application/x-7z-compressed                      7z;
    application/x-cocoa                              cco;
    application/x-java-archive-diff                  jardiff;
    application/x-java-jnlp-file                     jnlp;
    application/x-makeself                           run;
    application/x-perl                               pl pm;
    application/x-pilot                              prc pdb;
    application/x-rar-compressed                     rar;
    application/x-redhat-package-manager             rpm;
    application/x-sea                                sea;
    application/x-shockwave-flash                    swf;
    application/x-stuffit                            sit;
    application/x-tcl                                tcl tk;
    application/x-x509-ca-cert                       der pem crt;
    application/x-xpinstall                          xpi;
    application/xhtml+xml                            xhtml;
    application/xspf+xml                             xspf;
    application/zip                                  zip;

    application/octet-stream                         bin exe dll;
    application/octet-stream                         deb;
    application/octet-stream                         dmg;
    application/octet-stream                         iso img;
    application/octet-stream                         msi msp msm;

    audio/midi                                       mid midi kar;
    audio/mpeg                                       mp3;
    audio/ogg                                        ogg;
    audio/x-m4a                                      m4a;
    audio/x-realaudio                                ra;

    video/3gpp                                       3gpp 3gp;
    video/mp2t                                       ts;
    video/mp4                                        mp4;
    video/mpeg                                       mpeg mpg;
    video/quicktime                                  mov;
    video/webm                                       webm;
    video/x-flv                                      flv;
    video/x-m4v                                      m4v;
    video/x-mng                                      mng;
    video/x-ms-asf                                   asx asf;
    video/x-ms-wmv                                   wmv;
    video/x-msvideo                                  avi;
}

7.删除原来的容器重新运行。

docker rm -f exam_h5_nginx

javascript 复制代码
docker run --name exam_h5_nginx  -p 9527:9527   -d -v /usr/local/nginx/conf/exam_h5_nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/conf/exam_h5_mime.types:/etc/nginx/mime.types -v /home/app:/home/app nginx

8.pdf能正常预览。

相关推荐
qiushijin969 小时前
【2026.12】日语能力考试N1、N2、N3、N4、N5历年真题及答案合集PDF(2010-2026年)
经验分享·pdf
小蒜学长11 小时前
基于SpringBoot+uni-app的闪洁家政系统的设计与实现(代码+数据库+LW)
java·spring boot·后端·uni-app·家政服务
工具派12 小时前
PDF里没有表格,PDF转Excel行列是靠什么对上的?
pdf·excel
小幂同学12 小时前
图片、视频和PDF太大,电脑上怎么压缩更合适?
pdf·音视频·zip·解压缩软件·zip解压缩
anyup_前端梦工厂13 小时前
uni-app 模板 Starter 一键清理 Skill 发布
前端·人工智能·uni-app
qiushijin9614 小时前
【2026】考研政治历年真题及答案解析合集PDF(2003-2026年)
经验分享·pdf
程序员Linc14 小时前
ONNXOCRSharp 开源手记 02|v0.4.0 PDF识别
开发语言·pdf·c#·ocr·onnxocrsharp
Hello_Pyhx14 小时前
RetainPDF v4.2.6:Windows、macOS、Linux PDF 翻译的 API 配置与任务排查
linux·macos·pdf
anyup_前端梦工厂15 小时前
将uni-app工程迁移uni-app x,AI 能帮我们做什么?
前端·人工智能·uni-app
慧都小妮子15 小时前
FastReport PDF/UA 导出:让出海 PDF 满足无障碍合规要求
pdf·c#·fastreport·报表导出·pdf/ua·pdf 无障碍