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能正常预览。

相关推荐
&白帝&32 分钟前
uniapp中使用picker-view选择时间
前端·uni-app
fakaifa1 小时前
八戒农场小程序V2最新源码
小程序·uni-app·php·生活·开源软件
易我科技2 小时前
PDF里怎么直接编辑文字?简单操作指南
pdf
平凡シンプル5 小时前
安卓 uniapp跨端开发
android·uni-app
艾小逗7 小时前
uniapp快速入门教程,内容来源于官方文档,仅仅记录快速入门需要了解到的知识点
小程序·uni-app·app·es6
鸭子嘎鹅子呱21 小时前
uniapp使用高德地图设置marker标记点,后续根据接口数据改变某个marker标记点,动态更新
uni-app·map·高德地图
计算机源码社1 天前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp(源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
Angus-zoe1 天前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app
Pluto & Ethereal1 天前
uni-app尺寸单位、flex布局于背景图片
uni-app
天空下sky1 天前
uniapp+若依 开发租房小程序源码分享
uni-app