Extjs PDF在线预览（无需控件）

2020-03-25 20:56:49 阅读：399 来源： 互联网

标签：function 控件 RULE Extjs Ext var PDF js ID

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/WEB-INF/jsp/base.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><spring:message code="update" /><spring:message code="DEFECT" /></title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/ext-zh_CN.css" />
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/pdf.js"></script>
<script type="text/javascript" src="js/pdf.worker.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script>
    var RULE_ID_ = null;
    if (location.href.split('?')[1] != undefined) {
        var parameters = Ext.urlDecode(location.href.split('?')[1]);
        (parameters.RULE_ID_ != undefined) ? RULE_ID_ = parameters.RULE_ID_ : 0;
    }

    Ext.onReady(function() {
        Ext.getBody().mask('<spring:message code="loading" />');
        _init();
    });

    function _init() {
        _loadFormFileContent();
        Ext.getBody().unmask();
    }

    function _loadFormFileContent() {
        var pdfUrl = 'loadRuleContent.do?RULE_ID_=' + RULE_ID_ + '&random=' + Math.random();
        PDFJS.getDocument(pdfUrl).then(function getPdf(pdf) {
            for (var i = 0; i <= pdf.numPages; i++) {
                pdf.getPage(i).then(function getPage(page) {
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    document.body.appendChild(canvas);
                    page.render({
                        canvasContext : context,
                        viewport : viewport
                    });
                });
            }

        });
    }
</script>
</head>
<body>
    <div style="width: 100%; height: 100%; background: #404040">
        <div style="width: 1000px; margin: 0 auto;"></div>
    </div>
</body>
</html>

注：引入pdf.js、pdf.worker.js文件；

js文件下载：

https://github.com/dimoGH/pdf.js

标签：function,控件,RULE,Extjs,Ext,var,PDF,js,ID
来源： https://www.cnblogs.com/mwd-banbo/p/12569889.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Extjs PDF在线预览（无需控件）