uniapp 部署h5,pdf预览

1.hubuilderx 打包h5。

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

解压部署包:unzip h5.zip  。

3.nginx配置。

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容器。

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


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 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/418077.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT-4 AI 绘图魔力释放

最近刚开通了 ChatGPT4,正好要设计一个网站图标,想测试一下它AI绘图的能力,让它根据文字描述生成一个想象中的图标 (PS:如果想体验 GPT4 文生图,可以看这个教程 如何升级 ChatGPT 4.0) 第1次交…

nginx使用详解--动静分离

什么是动静分离? 为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源,如图片、js、css等文件,可以在反向代理服务器中进行缓存,这样浏览器在请…

react使用@reduxjs/toolkit和react-redux实现store状态管理

一、概述 reduxjs/toolkit和react-redux是用于在React应用中管理全局状态的工具库 1、reduxjs/toolkit: reduxjs/toolkit是Redux官方推荐的工具库,是对 Redux 的二次封装,它提供了一些便捷的API和工具,帮助开发者更快速地编写R…

喜迎乔迁,开启新章 ▏易我科技新办公区乔迁庆典隆重举行

2024年1月18日,易我科技新办公区乔迁庆典在热烈而喜庆的氛围中隆重举行。新办公区的投入使用,标志着易我科技将以崭新姿态迈向新的发展阶段。 ▲ 易我科技新办公区 随着公司业务的不断发展和壮大,为了更好地适应公司发展的需要,…

mysql python学习笔记

mysql 基础概念 1.一个表格一般包含一个主建 2.可有多个主见,叫组合主见 3.可以有foreign key 用于链接外部表格的主建 外键目的: 这个约束的目的是确保当前表中的外键列(JNO列)的值必须存在于另一个表(J’表)的主键…

kswapd0挖矿病毒攻击记录

文章目录 一、起因与病毒分析1、起因2、阿里云告警2.1 恶意脚本代码执行12.2 恶意脚本代码执行22.3恶意脚本代码执行32.4 恶意脚本代码执行4 3、病毒简单分析3.1 病毒的初始化3.2 病毒本体执行 4、总结 二、ubuntu自救指南1、病毒清理2、如何防御 一、起因与病毒分析 1、起因 …

蓝桥杯 信号覆盖

遍历每一个坐标轴上的点&#xff0c;带入圆的方程&#xff0c;看是否在圆内或圆上 #include<bits/stdc.h> using namespace std; int main() {int w,h,n,r,i,j,k,s,ans0;cin>>w>>h>>n>>r;int x[n1],y[n1];for(i0;i<n;i){cin>>x[i]>&…

什么是前端框架中的数据绑定(data binding)?有哪些类型的数据绑定?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

Linux读写锁相关函数及操作

读写锁&#xff1a; 概念&#xff1a;读写锁也叫共享-独占锁。当读写锁以读模式锁住时&#xff0c;它是以共享模式锁住的&#xff1b;当它以写模式锁住时&#xff0c;它是以独占模式锁住的。&#xff08;写独占&#xff0c;读共享&#xff09;。 读写锁使用场所&#xff1a; …

基于PHP的在线英语学习平台

有需要请加文章底部Q哦 可远程调试 基于PHP的在线英语学习平台 一 介绍 此在线英语学习平台基于原生PHP开发&#xff0c;数据库mysql。系统角色分为学生&#xff0c;教师和管理员。(附带参考设计文档) 技术栈&#xff1a;phpmysqlphpstudyvscode 二 功能 学生 1 注册/登录/…

编译 qsqlmysql.dll QMYSQL driver not loaded

Qt 连接MySQL数据库&#xff0c;没有匹配的qsqlmysql.dll, 需要我们跟进自己Mysql 以及QT版本自行编译的。异常如下图&#xff1a; 安装环境为 VS2019 Qt5.12.12&#xff08;msvc2017_64、以及源码&#xff09; 我的安装地址&#xff1a;D:\Qt\Qt5.12.12 Mysql 8.1.0 默认安…

【Kotlin】函数

1 常规函数 1.1 无参函数 fun main() {myFun() }fun myFun() {println("myFun") // 打印: myFun } 1.2 有参函数 1&#xff09;常规调用 fun main() {myFun("myFun") // 打印: myFun }fun myFun(str: String) {println(str) } 2&#xff09;形参指定默…

Redis高级应用——海量数据高并发下Reids的分片集群,原理和应用,集群伸缩以及项目配置

目录 引出Reids海量数据&#xff0c;高并发问题认识Redis集群算法搭建Redis分片集群准备实例安装redis启动 创建集群测试 分片集群原理搭建分片集群散列插槽插槽原理小结 认识集群伸缩需求分析创建新的redis实例添加新节点到redis集群转移插槽自动故障转移 SpringBoot配置Redis…

基于YOLOv8深度学习的复杂场景下船舶目标检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

Bash命令启动、关闭、重启Jar包

1、创建文件夹&#xff0c;将项目jar文件丢入服务器中 mkdir -m 755 test -m&#xff1a;类似chmod 给文件夹权限 2、一般开发环境和部署环境配置不一致&#xff0c;在有外置配置及内置配置时&#xff0c;JAR优先使用外置配置文件&#xff0c;即将外置配置文件修改好之后&am…

利用python爬取本站的所有博客链接

目录 前因 首先的尝试 解决办法 导入包 定义一个json配置文件 打开浏览器执行操作 注意 提取源代码并且进行筛选链接 执行结果 前因 由于自己要把csdn的博客同步到hugo中&#xff0c;把博客转为md格式已经搞好了&#xff0c;但是由于csdn的图片具有防盗链&#xff0c;…

Nginx多次代理后获取真实的用户IP访问地址

需求&#xff1a;记录用户操作记录&#xff0c;类似如下表格的这样 PS: 注意无论你的服务是Http访问还是Https 访问的都是可以的&#xff0c;我们服务之前是客户只给开放了一个端口&#xff0c;但是既要支持https又要支持http协议&#xff0c;nginx 是可以通过stream 模块配置双…

Prometheus-监控远程linux的主机

一、本地访问 1、访问 http://8.137.122.212:9090/2、查看监控的主机 默认只监控了本机一台主机 这里的IP地址原本是‘localhost’&#xff0c;为了方便我将‘localhost’换成了主机的IP地址 现在看只监控了本机一台主机 3、查看监控数据 通过http://8.137.122.212:9090/m…

十五、集合进阶——不可变集合 、Stream流 和 方法引用

不可变集合 和 Stream流 一、创建不可变集合二、Stream流2.1 初识Stream流2.2Stream流的中间方法2.3Stream流的终结方法 三、练习练习1&#xff1a;数据过滤练习2&#xff1a;数据操作练习3&#xff1a;数据操作 四、方法引用4.1 初识 方法引用4.2 引用 静态方法4.3 引用 成员方…

七通道NPN 达林顿管GC2003,专为符合标准 TTL 而制造,最高工作电压 50V,耐压 80V

GC2003 内部集成了 7 个 NPN 达林顿晶体管&#xff0c;连接的阵列&#xff0c;非常适合逻辑接口电平数字电路&#xff08;例 如 TTL&#xff0c;CMOS 或PMOS 上/NMOS&#xff09;和较高的电流/电压&#xff0c;如电灯电磁阀&#xff0c;继电器&#xff0c;打印机或其他类似的负…