지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).

Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).

php是最好的语言
풀어 주다： 2018-08-09 10:34:37
원래의
13722명이 탐색했습니다.

오늘 쓰고 싶은 글은 인터넷에 유용한 정보가 너무 적어서 반성하게 되었습니다.

1. 요구 사항을 알려주십시오. 제목을 클릭하면 미리보기된 PDF 페이지로 이동하고 다운로드 기능은 [바람직하게] 선택 사항입니다.

Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).

2. 구현 결과:

Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).

3. 코드 구현:

pdf.js에 따라 다름 [완전한 컨트롤 다운로드 필요]

공식 웹사이트 다운로드: http://mozilla.github.io/ pdf.js /

'다운로드'를 클릭하여 다운로드 페이지

Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).

git 복제 또는 다운로드로 이동하세요.

다운로드 후 파일은 다음과 같습니다.

Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).

[프로젝트를 배포하고 어셈블하는 방법은 나중에 중점을 둡니다.]

1 새 빈 프로젝트를 만들고 해당 파일을 프로젝트 루트 디렉터리에 넣습니다.

Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).

빨간색 원은 공식 홈페이지에서 다운로드 받은 경우, 파일 이름을 변경한 후 프로젝트에 드래그하면 됩니다. 기억하기 위해 그 안의 파일을 터치할 필요는 없습니다. 에 대해서는 별도로 언급하십시오.

녹색은 제가 작성한 것입니다. [downwn.html은 테스트 파일, static은 pdf 파일] 아래 코드를 붙여넣으세요:

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;

        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;

        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>
<ul>
    <li dataSrc = &#39;KD-122LA火灾探测报警器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-122LA火灾探测报警器说明书ccc</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-212LA可燃气体探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-212LA 可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-216LA可燃气体探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-216LA可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;Kd-122LA_KD-601系统遥控器使用说明.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">Kd-122LA KD-601系统遥控器使用说明</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-602LA_SOS一键救助使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-602LA  SOS一键救助使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-701LA_溢水探测器使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-701LA  溢水探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-702LA红外人体移动探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-702LA红外人体移动探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-703LA_门窗探测器使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-703LA  门窗探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-805A_WiFi系统主机使用说明书_V1.00.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">KD-805A  WiFi系统主机使用说明书_V1.00</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;WIFI智慧家庭安防系统操作说明书_v0.01.pdf&#39;onclick="fun(this)">
        <img class="leftImg" src="img/Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전)." alt=""> <span href="">WIFI智慧家庭安防系统操作说明书_v0.01</span>  <img class="next" src="img/next.png" alt="">
    </li>


</ul>
<script src="js/jquery.min.js"></script>
<script>
    function fun(e){
     // console.log(e);
     var dataSrc = $(e).attr(&#39;dataSrc&#39;);
     //    console.log(dataSrc);
     //    sessionStorage.setItem(&#39;dataSrc&#39;,dataSrc);
     //    window.location.href=&#39;index.html&#39;
        var urlSrc =  &#39;http://testweixin.kingdun.net.cn/pdf/static/&#39;+dataSrc;
        $.ajax({
            url: urlSrc,
            type: "get",
            success: function(xhr, data){
                if (navigator.userAgent.indexOf(&#39;Android&#39;) > -1) {
                    //判断移动端是android 还是ios ，若是android 则要借助pdf插件
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                } else {
                    //ios直接打开pdf
                    //window.location.href = url;
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                }
            },
            error: function(){
                //window.location.href = &#39;${ctx}/core/user.androidPdf.do?mid=&#39;+mid+"&name="+storagename+"&realname="+realname;
                window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
            }
        });
    }
</script>
</body>

</html>
로그인 후 복사

[호환성]: Apple 휴대폰: 직접 미리보기, 휴대폰 시스템과 함께 제공되지만 다운로드할 수 없으며(이익과 손실이 있음) wps와 같은 다른 응용 프로그램에서 열 수 있습니다.预 可 Android: 미리보기, 다운로드, 다운로드를 지원하기 위해 휴대폰의 기본 브라우저에서 엽니다. 저는 Xiaomi 8, UC 브라우저 다운로드 잘못된 코드를 사용하지만 Xiaomi에는 PDF 파일을 다운로드할 수 있는 브라우저가 함께 제공됩니다.

크로스오버.

Easter egg: down.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;

        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;

        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>

<a href="static/1.pdf">00001</a>


</body>

</html>
로그인 후 복사

하하, 태그 href를 직접 사용하여 pdf 파일로 이동해도 됩니다. [iPhone: 직접 미리보기; Android: 다운로드 링크]

관련 권장 사항:

Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).JS 인쇄 기능 코드는 인쇄 미리보기, 인쇄 설정 등을 구현할 수 있습니다.

JavaScript는 인쇄, 인쇄 미리보기, 인쇄 설정

위 내용은 Node.js는 PDF 온라인 미리보기 및 인쇄를 구현합니다(정식 버전).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
js pdf 在线预览
원천：php.cn
이전 기사：프런트 엔드 사례: js를 사용하여 테이블 행 삭제, 정렬 및 필터링 구현 다음 기사：Vue 가상 DOM이란 무엇입니까? vue의 가상 DOM 사용
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2277
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2409
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
2027
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1914
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1981
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿