pdf.js尝试

pdf.js介绍：

简单说就是一个 PDF 解析器 

http://www.oschina.net/search?scope=project&q=Pdf.js

http://www.oschina.net/news/22669/pdf-js-1-0 

在线示例：（貌似只能在firefox浏览器下才能展示，非firefox貌似需要compatibility.js，编译后位于‘build\generic\web’下）这两个例子比我下面的都好O(∩_∩)O哈哈~

http://jsbin.com/pdfjs-helloworld-v2/1/edit

http://jsbin.com/pdfjs-prevnext-v2/1/edit

源码：https://github.com/mozilla/pdf.js

官网：http://mozilla.github.io/pdf.js/

解压，目录结构：

切换到src,编译：node make generic（需要nodejs支持）

编译后多了一个“build”文件夹（有点大啊，正式使用时需要压缩一下）

编译后，发现pdf.js有乱码。不知道什么原因？后续试验都是引用的https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js

看一下官方例子‘acroforms’：

froms.js代码

/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

//
// Basic AcroForms input controls rendering
//

'use strict';

//表单数据存放 name : value 
//有了为默认值，填写了再赋值
var formFields = {};

//setupForm(formDiv, page, viewport);
function setupForm(div, content, viewport) {
  function bindInputItem(input, item) {
	//取默认值
    if (input.name in formFields) {
      var value = formFields[input.name];
      if (input.type == 'checkbox')
        input.checked = value;
      else if (!input.type || input.type == 'text')
        input.value = value;
    }
	//改变formFields值
    input.onchange = function pageViewSetupInputOnBlur() {
      if (input.type == 'checkbox')
        formFields[input.name] = input.checked;
      else if (!input.type || input.type == 'text')
        formFields[input.name] = input.value;
    };
  }
  //构造元素位置
  function createElementWithStyle(tagName, item) {
    var element = document.createElement(tagName);
    var rect = PDFJS.Util.normalizeRect(
      viewport.convertToViewportRectangle(item.rect));
	  
    element.style.left = Math.floor(rect[0]) + 'px';//左上角x
    element.style.top = Math.floor(rect[1]) + 'px';//左上角y
    element.style.width = Math.ceil(rect[2] - rect[0]) + 'px';
    element.style.height = Math.ceil(rect[3] - rect[1]) + 'px';
    return element;
  }
  
  //设置字体
  function assignFontStyle(element, item) {
    var fontStyles = '';
    if ('fontSize' in item) {
      fontStyles += 'font-size: ' + Math.round(item.fontSize *
        viewport.fontScale) + 'px;';
    }
    switch (item.textAlignment) {
      case 0:
        fontStyles += 'text-align: left;';
        break;
      case 1:
        fontStyles += 'text-align: center;';
        break;
      case 2:
        fontStyles += 'text-align: right;';
        break;
    }
	//将字体样式追加到后面
    element.setAttribute('style', element.getAttribute('style') + fontStyles);
  }

  content.getAnnotations().then(function(items) {
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      switch (item.type) {
        case 'Widget':
          if (item.fieldType != 'Tx' && item.fieldType != 'Btn' &&
              item.fieldType != 'Ch')
            break;
		//创建一个Div
          var inputDiv = createElementWithStyle('div', item);
          inputDiv.className = 'inputHint';
          div.appendChild(inputDiv);
          var input;
          if (item.fieldType == 'Tx') {
            input = createElementWithStyle('input', item);
          }
          if (item.fieldType == 'Btn') {
            input = createElementWithStyle('input', item);
            if (item.flags & 32768) {
              input.type = 'radio';
               // radio button is not supported
            } else if (item.flags & 65536) {
              input.type = 'button';
              // pushbutton is not supported
            } else {
              input.type = 'checkbox';
            }
          }
          if (item.fieldType == 'Ch') {
            input = createElementWithStyle('select', item);
            // select box is not supported
          }
          input.className = 'inputControl';
          input.name = item.fullName;
          input.title = item.alternativeText;
          assignFontStyle(input, item);
          bindInputItem(input, item);
          div.appendChild(input);
          break;
      }
    }
  });
}

renderPage(viewer, pdf, pageNumber++, function pageRenderingComplete(){...})
//一页一页处理
function renderPage(div, pdf, pageNumber, callback) {
	//获得pageNumber页
  pdf.getPage(pageNumber).then(function(page) {
    var scale = 1.5;//缩放比例
    var viewport = page.getViewport(scale);//创建窗口

    var pageDisplayWidth = viewport.width;
    var pageDisplayHeight = viewport.height;

	//div <div id="viewer"></div>
    var pageDivHolder = document.createElement('div');
    pageDivHolder.className = 'pdfpage';
    pageDivHolder.style.width = pageDisplayWidth + 'px';
    pageDivHolder.style.height = pageDisplayHeight + 'px';
    div.appendChild(pageDivHolder);//Page2Div 加入一页

    // Prepare canvas using PDF page dimensions
	//创建画布
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = pageDisplayWidth;
    canvas.height = pageDisplayHeight;
    pageDivHolder.appendChild(canvas);
	
    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext).then(callback);

    // Prepare and populate form elements layer
    var formDiv = document.createElement('div');
    pageDivHolder.appendChild(formDiv);
	
	//初始化from
    setupForm(formDiv, page, viewport);
	
	/*生成的结构应该是这样的
	<div id="viewer">
		<div className='pdfpage'> // pageDivHolder
			<div> // canvas
			</div>
			
			<div> // formDiv
				<div classNam='inputHint'></div> //inputHint
				<input className='inputControl'/> or <select className='inputControl'/>
			</div>
		</div>
	</div>
	*/
  });
}

// Fetch the PDF document from the URL using promices
PDFJS.getDocument(pdfWithFormsPath).then(function getPdfForm(pdf) {
  // Rendering all pages starting from first
  var viewer = document.getElementById('viewer');
  var pageNumber = 1;
  renderPage(viewer, pdf, pageNumber++, function pageRenderingComplete() {
    if (pageNumber > pdf.numPages)
      return; // All pages rendered
    // Continue rendering of the next page
    renderPage(viewer, pdf, pageNumber++, pageRenderingComplete);
  });
});

index.html修改后，源码不能直接运行（firefox）

<!doctype html>
<html>

<head>
  <!-- In production, only one script (pdf.js) is necessary -->
  <!-- In production, change the content of PDFJS.workerSrc below -->
  <!--
  <script type="text/javascript" src="../../src/shared/util.js"></script>
  <script type="text/javascript" src="../../src/shared/colorspace.js"></script>
  <script type="text/javascript" src="../../src/shared/pattern.js"></script>
  <script type="text/javascript" src="../../src/shared/function.js"></script>
  <script type="text/javascript" src="../../src/shared/annotation.js"></script>
  <script type="text/javascript" src="../../src/display/api.js"></script>
  <script type="text/javascript" src="../../src/display/metadata.js"></script>
  <script type="text/javascript" src="../../src/display/canvas.js"></script>
  <script type="text/javascript" src="../../src/display/font_loader.js"></script>
  -->
  //直接用'build'下编译后的pdf.js（去掉乱码）好像也不能用，⊙﹏⊙b汗
  <script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
  <script type="text/javascript">
    // Specify the main script used to create a new PDF.JS web worker.
    // In production, change this to point to the combined `pdf.js` file.
    //PDFJS.workerSrc = '../../src/worker_loader.js';//这个什么意思，还不懂
    //PDFJS.disableWorker = true;

    // Specify the PDF with AcroForm here
    //var pdfWithFormsPath = '../../test/pdfs/f1040.pdf'; //源码包中并没有这个文件，而是一个‘f1040.pdf.link’连接
    //var pdfWithFormsPath = 'http://www.irs.gov/pub/irs-pdf/f1040.pdf';//直接填链接也不行，⊙﹏⊙b汗。总之稀里糊涂，试了N遍终于出来了
    var pdfWithFormsPath = 'f1040.pdf';//下载下来放到通目录下
  </script>
  
  <style>
  .pdfpage { position:relative; top: 0; left: 0; border: solid 1px black; margin: 10px; }
  .pdfpage > canvas { position: absolute; top: 0; left: 0; }
  .pdfpage > div { position: absolute; top: 0; left: 0; }
  .inputControl { background: transparent; border: 0px none; position: absolute; margin: auto; }
  .inputControl[type='checkbox'] { margin: 0px; }
  .inputHint { opacity: 0.2; background: #ccc; position: absolute; }
  </style>

  <script type="text/javascript" src="forms.js"></script>
</head>

<body>
  <div id="viewer"></div>
</body>

</html>

生成的网页结构，和上面猜想的类似。

<div id="viewer">
<div class="pdfpage" style="width: 918px; height: 1188px;">
<canvas width="918" height="1188"></canvas>
<div></div>
</div>
<div class="pdfpage" style="width: 918px; height: 1188px;">
<canvas width="918" height="1188"></canvas>
<div></div>
</div>
</div>

解析后的pdf（解析为图片了），第一页