[html存档]操作说明页面

最新推荐文章于 2024-05-16 09:31:35 发布
软糖乐乐
最新推荐文章于 2024-05-16 09:31:35 发布
阅读量303
点赞数
分类专栏： Layui 前端文章标签： html 前端 layui javascript
本文链接：https://blog.csdn.net/kim_sl/article/details/124405452
版权
前端同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
Layui
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作说明</title>
</head>
<link href="/static/layui/css/layui.css" rel="stylesheet">
<link href="/static/layui/css/modules/tableFilter/tableFilter.css" rel="stylesheet"/>
<script src="/static/layui/layui.js"></script>
<!-- <script src="/static/vue/vue.js"></script> -->
<body>
  <div class="layui-fluid" style="margin: 0 40px">
   
    <div class="layui-row">
      <div class="layui-col-md9">
        <button type="button" class="layui-btn" id="test1">
          <i class="layui-icon">&#xe67c;</i>上傳操作說明文件
        </button>
        <!-- <div class="layui-input-block" id = "demo1"></div> -->
      </div>

    </div>
    
  </div>

  

  
  <!-- <iframe src="../../sd.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>  -->
  <!-- <embed src="sd.pdf" width="100%" height="800" href="../../egm/sd.pdf"></embed>FF -->
  <!-- <embed src="sd.pdf" width="600" height="600">  -->

  
  <!-- <embed src="../sd.pdf" type="application/pdf" width="100%" height="100%"> -->
  <!-- <embed src="sd.pdf" type="application/pdf" width="800" height="600"> -->
  <!-- <img src="../.../123.jpg"></> -->
  <!-- <img src="../../123.jpg" alt=""> -->

  <!-- <iframe id="pdf" src = '/static/pdfjs-dist/web/viewer.html?file='+encodeURIComponent(`/form/formDataProcess/getfilestream?imgpath=`+ fileurl +``) width="800" height="600"></iframe> -->
  <!-- <iframe src="included.html" width="450" height="400" frameborder="0"scrolling="no">
    `<a href='/static/pdfjs-dist/web/viewer.html?file='+encodeURIComponent(`/form/formDataProcess/getfilestream?imgpath=`+ {{fileurl}} +``)>`
          你的浏览器不支持iframe页面嵌套，请点击这里访问页面内容。
      </a>  
 </iframe> -->

  <script>
  layui.use(['upload','form'], function(){
    var upload = layui.upload,
        $ = layui.$;
        form = layui.form;
    //全局变量
    var fileurl = '{{fileurl}}'
    //==============================渲染==============================================

    // 圖片放大預覽
    function amplificationImg(demo) {
      var $ = layui.$
      var t = demo
      var cate = t.split('.')[1] // 文件类型
      if(cate === 'pdf' || cate === 'JPG' || cate === 'jpg' || cate === 'PNG' ||
          cate === 'png' || cate === 'JPEG' || cate === 'jpeg'){
          if(cate !== 'pdf') {
              // layer.open({
              //     type: 1,
              //     title: false,
              //     closeBtn: 0,
              //     shadeClose: true,
              //     area: ['800px', '600px'], //宽高
              //     content: "<div align='center' style='margin-top:20px'><img src='/form/formDataProcess/getfilestream?imgpath=" + t + "' /></div>"
              // })
              
              let htmll = "<div align='center' style='margin-top:20px'><img src='/form/formDataProcess/getfilestream?imgpath=" + t + "' /></div>"
 
              var ifr = document.createElement('div');
              ifr.innerHTML = htmll
       
              // div.width = '100%'
              // div.height= screen.availHeight
              // ifr.src = htmll;
              // $(htmll)
        
              document.body.appendChild(ifr);
     


            
          } else {
             
              let htmll = '/static/pdfjs-dist/web/viewer.html?file='+encodeURIComponent(`/form/formDataProcess/getfilestream?imgpath=`+ t +``)
  //             let tempNode = document.createElement('div');
  //             tempNode.innerHTML = '  <embed src='+htmll+' type="application/pdf" width="800" height="600">';
  //             form.render()

              // document.domain = 'a.com';
              var ifr = document.createElement('iframe');
              ifr.width = '100%'
              ifr.height= screen.availHeight
              ifr.src = htmll;
        
              document.body.appendChild(ifr);
              // ifr.onload = function(){
              //     var doc = ifr.contentDocument || ifr.contentWindow.document;
              //     //在这里操作doc，也就是b.html
              //     ifr.onload = null;
              // };


              // var iframe = document.getElementById("iframe");
              // console.log(99,iframe)
              // document.body.appendChild(iframe);
              // // var s = fixingHTB.innerHTML;  //进入可编辑模式前存好
              // iframe.contentWindow.document.designMode = "on";    //文档进入可编辑模式
              // iframe.contentWindow.document.open();               //打开流
              // iframe.contentWindow.document.write(htmll); 
              // iframe.contentWindow.document.close();              //关闭流

              // layer.open({
              //     type: 2,
              //     area: ['1000px', '750px'],
              //     fixed: false, //不固定
              //     maxmin: true,
              //     content: '/static/pdfjs-dist/web/viewer.html?file='+encodeURIComponent(`/form/formDataProcess/getfilestream?imgpath=`+ t +``)
              // });
       


              // window.open('/static/pdfjs-dist/web/viewer.html?file='+encodeURIComponent(`/form/formDataProcess/getfilestream?imgpath=`+ t +``))
          }
      } else {
          layer.msg('該文件無法預覽', {
              time:2000,
              btn:['確定','取消']
          })
      }
    }
  
    amplificationImg(fileurl)

    //判断是否为超级管理员 有则可以
    $.ajax({
      url: '/egm/indexView/Explain_permission',
      // type: 'get',
      success: function (res) {
        console.log(7777,res)
        if (res.code==0){
          //渲染按钮
          var uploadListIns = upload.render({
            elem: '#test1',
            url: '/form/ExplainFile/upload',
            {#accept: 'file', #} //允许上传的文件类型
            {#acceptMime: 'file/pdf, file/dwg',#}
            exts: 'pdf|dwg|xls|xlsx|doc|docx|jpg|gif|jpeg|png',
            data: {'ProgramName': '產品審核'},
            done: function (res, upload) { //上传完毕回调
                if (res.code == 0) {

                    layer.msg('上傳成功！')
                  } else {
                    layer.msg(res.msg)
                  }
            },
            error: function () { //请求异常回调
                layer.msg('操作失敗!')
            }
          });

        }else{
          $('#test1').addClass("layui-btn layui-btn-disabled").attr('disabled','disabled')
        }
      }
  })
        

    
    


  //   // 文件上傳
  //   uploadListIns = upload.render({
  //     elem: '#test1'
  //     // ,elemList: $('#demoList') //列表元素对象
  //     ,url: '/form/ExplainFile/upload'
  //     ,accept: 'file'
  //     ,multiple: false
  //     ,auto: false
  //     // ,bindAction: '#testListAction'
  //     ,choose: function(obj){
  //         var that = this;
         
  //         //预读本地文件示例，不支持ie8
  //         obj.preview(function(index, file, result){
	// 	            $('#demo1').attr('src', result); //图片链接（base64）
	// 	        });
  //       }
  //     ,before: function(){
  //       //參數管理
  //         this.data['ProgramName'] = '產品審核'
  //     }
  //     ,done: function(res, index, upload){ //成功的回调
  //         var that = this;
  //         if(res.code == 0){ //上传成功
  //           return layer.msg('上傳成功')
  //         }
  //         this.error(index, upload);
  //     }
  //     ,allDone: function(obj){ //多文件上传完毕后的状态回调
  //         console.log(obj)
  //     }
  //     ,error: function(index, upload){ //错误回调
  //       return layer.msg('上傳失敗')
  //       }
     
  // });

    // var uploadInst = upload.render({
		//     elem: '#test1'
		//     ,url: '/form/ExplainFile/upload' //改成您自己的上传接口
		//     // ,auto:false // 不自动上传
		//     // ,bindAction: '#LAY-user-back-submit' // 绑定上传按钮
		//     ,accept: 'file' // 只允许上传图片
		//     // ,acceptMime: 'image/*'  // 打开文件选择器时只显示图片
		//     ,choose: function(obj){
		//         //预读本地文件示例，不支持ie8
		//         obj.preview(function(index, file, result){
		//             $('#demo1').attr('src', result); //图片链接（base64）
		//         });
		//     }
		//     ,done: function(res){
		//         //如果上传失败
		//         if(res.code < 0){
		//             return layer.msg('上传失败');
		//         }
		//         return layer.msg('上传成功');
		//         //上传成功
		//     }
		//     ,error: function(){
		//         //演示失败状态，并实现重传
		//         var demoText = $('#demoText');
		//         demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		//         demoText.find('.demo-reload').on('click', function(){
		//             uploadInst.upload();
		//         });
		//     }
		// });

    // //执行实例
    // var uploadInst = upload.render({
    //     elem: '#test1' //绑定元素
    //     ,url: '/upload/' //上传接口
    //     ,done: function(res){
    //       //上传完毕回调
    //     }
    //     ,error: function(){
    //       //请求异常回调
    //     }
    //   });

    });



    // amplificationImg({{fileurl}})

    // console.log({{fileurl}})
    // const vm = new Vue({
    //   el:'#app',
    //   data:{
    //     height:screen.innerHeight,
    //     width:screen.innerWidth
    //   }
      
    // });
    // document.getElementById('pdf').style.height = '1960'
    // document.getElementById('pdf').style.width = screen.availWidth
    // function reurl(){ 

    //   url = location.href; //把当前页面的地址赋给变量 url 

    //   var times = url.split("?"); //分切变量 url 分隔符号为 "?" 

    //   if(times[1] != 1){ //如果?后的值不等于1表示没有刷新 

    //   url += "?1"; //把变量 url 的值加入 ?1 
    //   // document.getElementById('pdf').style.width = screen.availHeight
    //   // document.getElementById('pdf').style.width = screen.availWidth
    //   window.location.replace(url); //刷新页面 

    //   } 
    //   } 
    // reurl()
    // console.log(screen.availHeight,screen.availWidth,document.getElementById('pdf'))
  </script>
</body>


</html>
<!-- 
<object id ="app" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="760" height="411" border="0">

  <param name="_Version" value="65539">

  <param name="_ExtentX" value="20108">

  <param name="_ExtentY" value="10866">

  <param name="_StockProps" value="0">

  <param name="SRC" value="sd.pdf">
  <embed src="sd.pdf" :style = '{width:width,height:height}' href="sd.pdf"></embed>
  <embed src="sd.pdf" width="1678",height="1678" href="sd.pdf"></embed>

</object> -->