uniapp 部署h5,pdf预览

news2024/9/23 19:20:42

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C#/.NET/.NET Core优秀项目和框架2024年2月简报

前言 公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍、功能特点、使用方式以及部分功能截图等(打不开或者打开GitHub很慢的同学…

Java基础 - 6 - 面向对象(二)

Java基础 - 6 - 面向对象(一)-CSDN博客 二. 面向对象高级 2.1 static static叫做静态,可以修饰成员变量、成员方法 2.1.1 static修饰成员变量 成员变量按照有无static修饰,分为两种:类变量、实例变量(对象…

项目设计:基于Qt和百度AI的车牌识别系统(嵌入式ARM)

基于Qt和百度AI智能云实现的智能车牌识别系统,具体可实现为停车场管理系统、智能计费停车系统…等。 1.系统实现思路及框架 1.1实现思路 要实现一个车牌识别系统,有多种方法,例如用opencv图像算法实现,或用第三方算法接口&#x…

【每日一题】找到字符串中所有字母异位词

目录 题目:思路:暴力枚举:滑动窗口: 代码实现:一些优化:代码实现: 题目: 找到字符串中所有字母异位词 思路: 暴力枚举: 对于有关子串的题目我们使用暴力枚…

H12-821_113

113.如图所示是路由器现ATE输出的部分信息,以下关于这部分信息的描述,错误的是哪一项? A.display pim rp-info命令用来查看组播组对应的RP信息 B.RP地址是2.2.2.2 C.组地址是225.0.0.0 D.RP的优先级是0 答案:C 注释: …

C语言-柔性数组成员的使用

文章目录 摘要柔性数组成员基本使用细节探究 零长度数组-定长数组-变长数组 摘要 本文先介绍柔性数组成员(flexible array member)的基本使用,然后介绍其内存结构。最后,补充了一些数组相关的其他概念。 柔性数组成员 基本使用 参考: 【C语言内功修炼…

有趣的CSS - 一串乱码

大家好,我是 Just,这里是「设计师工作日常」,今天分享的是通过 css 来实现一段不停变化的 bug 乱码效果。 《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面…

AMDGPU KFD Test 编译使用

ROCT-Thunk-Interface是一个用于在ROCm软件堆栈中提供设备无关性的层。它是ROCm的一部分,允许不同的硬件平台(如AMD GPU和Intel CPU)使用相同的API进行计算。 要安装ROCT-Thunk-Interface,首先需要创建一个新的目录,并…

开源免费的文件互传工具,LocalSend软件推荐

怎么把手机里的文件传到电脑或电脑的文件传到手机? 在日常生活和工作中,我们经常需要在不同的设备间传输文件,比如照片、视频、文档等。如果你使用是统一的苹果设备Airdrop可以非常方便的共享文件,但是如果你要在不同操作系统的设…

css 鼠标移入放大的效果

效果 HTML <div class"img-wrap"><img class"img-item" src"../assets/1.png" alt"" srcset""></div> CSS <style lang"less" scoped> .img-wrap {/* 超出隐藏 */overflow: hidden;.img-…

开发环境热部署

为什么需要热部署 在实际开发中&#xff0c;经常要修改代码&#xff0c;然后重启服务&#xff0c;再验证代码是否生效。对于开发场景&#xff0c;随着项目的演进&#xff0c;微服务越来越多&#xff0c;等待重启的时间也会越来越多&#xff1b;对于联调场景&#xff0c;对一处…

代码随想录Day66 | 图的DFS与BFS

代码随想录Day66 | 图的DFS与BFS DFS797.所有可能的路径无向图和有向图的处理 BFS200.岛屿数量 DFS 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 状态 本质上就是回溯算法。 void dfs(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本节点所连接的…

for循环语句

语法格式&#xff1a; for (表达式1; 表达式2; 表达式3) { 若干语句;//循环体 } 执行规则 STEP1&#xff1a;计算“表达式1” &#xff0c;初始化。 STEP2&#xff1a; 判断“表达式2”的值&#xff0c;若 “表达式2”的值为true&#xff0c;则进行 STEP2&#xff0c;否则进行…

DevStack 基于 Ubuntu 部署 OpenStack

Devstack 简介 DevStack 是一系列可扩展的脚本&#xff0c;用于基于 git master 的最新版本快速调出完整的 OpenStack 环境。devstack 以交互方式用作开发环境和 OpenStack 项目大部分功能测试的基础。 devstack 透过执行 stack.sh 脚本&#xff0c;搭建 openstack 环境&…

ChatGPT最新功能“Text To Speech (TTS,文本转语音)”详细解读!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

32单片机基础:PWM驱动舵机,直流电机

PWM驱动舵机 接线图如上图所示。注意&#xff0c;舵机的5V 线不能接到面包板上的正极&#xff0c;面包板上的正极只有3.3V,是STM32提供的&#xff0c;所以要接到STLINK的5V, 我们如何驱动舵机呢&#xff1f;由之前我们介绍原理知道&#xff0c;要输出如下图对应的PWM波形才行…

【FPGA/IC】CRC电路的Verilog实现

前言 在通信过程中由于存在各种各样的干扰因素&#xff0c;可能会导致发送的信息与接收的信息不一致&#xff0c;比如发送数据为 1010_1010&#xff0c;传输过程中由于某些干扰&#xff0c;导致接收方接收的数据却成了0110_1010。为了保证数据传输的正确性&#xff0c;工程师们…

CentOS配网报错:network is unreachable

常用命令&#xff1a; 打开&#xff1a; cd /etc/sysconfig/network-scripts/ 修改&#xff1a; vim ifcfg-ens33 打开修改&#xff1a; vim /etc/sysconfig/network-scripts/ifcfg-ens33 保存&#xff1a; 方法1&#xff1a;ESCZZ&#xff08;Z要大写&#xff09; 方…

递归实现n的k次方(C语言)

编写一个函数实现n的k次方&#xff0c;使用递归实现。 下面来说一下思路 5的3次方&#xff1a;就是5*(5的3-1次方) 7的4次方&#xff1a;就是7*&#xff08;7的4-1次方&#xff09; 以此类推 n的k次方就是&#xff1a;n* n的&#xff08;k-1&#xff09;次方 int Func(int n,…

C++基于多设计模式下的同步异步日志系统day4

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C基于多设计模式下的同步&异步日志系统 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 只要内容主要实现了同步日志消息…