回答:

Previous

Next

Page: /

//

// NOTE:

// Modifying the URL below to another server will likely *NOT* work. BecAuse of browser

// security restrictions, we have to use a file server with special headers

// (CORS) - most servers don't SUpport cross-origin browser requests.

//

var url = 'http://cdn.mozilla.net/PDFjs/tracemonkey.PDF';

//

// Disable workers to avoID yet another cross-origin isSUe (workers need the URL of

// the script to be loaded, and currently do not allow cross-origin scripts)

//

PDFJS.disableWorker = true;

var PDFDoc = null,

pageNum = 1,

scale = 0.8,

canvas = document.getElementById('the-canvas'),

ctx = canvas.getContext('2d');

//

// Get page info from document, resize canvas aCCordingly, and render page

//

function renderPage(num) {

// Using PRomise to fetch the page

PDFDoc.getPage(num).then(function(page) {

var viewport = page.getViewport(scale);

canvas.height = viewport.height;

canvas.wIDth = viewport.wIDth;

// Render PDF page into canvas context

var renderContext = {

canvasContext: ctx,

viewport: viewport

};

page.render(renderContext);

});

// Update page counters

document.getElementById('page_num').textContent = pageNum;

document.getElementById('page_count').textContent = PDFDoc.numPages;

}

//

// Go to PRevious page

//

function goPrevious() {

if (pageNum <= 1)

return;

pageNum--;

renderPage(pageNum);

}

//

// Go to next page

//

function goNext() {

if (pageNum >= PDFDoc.numPages)

return;

pageNum++;

renderPage(pageNum);

}

//

// Asynchronously download PDF as an ArrayBuffer

//

PDFJS.getDocument(url).then(function getPdfHelloWorld(_PDFDoc) {

PDFDoc = _PDFDoc;

renderPage(pageNum);

});

3d文件与html结合,js和HTML5怎么结合?相关推荐

  1. 使用Three.js在浏览器绘制OFF格式的3D文件

    前言 最近有需求将一系列不同类型的3D文件在web端做出展示,即使从未接触过web端图形编程,three.js会提供很好的帮助,而对应的完成加载模型这些需求显得非常简单,很多格式提供了three的加载 ...

  2. HTML5七夕情人节表白网页(流星雨3D旋转相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码

    HTML5七夕情人节表白网页❤流星雨3D旋转相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程 ...

  3. [JS进阶] HTML5 之文件操作(file)

    前言 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文本输入字段,用来输入文 ...

  4. 视频教程-WebGL 可视化3D绘图框架:Three.js 零基础上手实战-其他

    WebGL 可视化3D绘图框架:Three.js 零基础上手实战 网名风舞烟,中国科技大学计算机专业.微软认证讲师(MCE).微软数据分析讲师.10多年软件行业从业经验,参与过数百万的企业级ERP系统 ...

  5. 打砖块小游戏php程序,利用原生js实现html5打砖块小游戏(代码示例)

    本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...

  6. html5录音功能代码,recorder.js 基于 HTML5 实现录音功能

    recorder.js 基于 HTML5 实现录音功能2020-06-23 01:49:56 recorder.js microphone基于HTML5的录音功能,输出格式为mp3文件. 前言 完全依 ...

  7. JS开发HTML5游戏《神奇的六边形》(四)

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  8. ThreeJS FBXLoader 加载3D文件,材质消失,已解决

    ThreeJS FBXLoader 加载3D文件,材质消失,已解决 ThreeJS FBXLoader 加载3D文件,材质消失 直接贴代码 ThreeJS FBXLoader 加载3D文件,材质消失 ...

  9. 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)

    520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...

最新文章

  1. layui关闭表格编辑_告别复制粘贴,表格再多也能快速合并!
  2. Java生成CSV文件
  3. ulimit限制 新系统_说来惭愧,我被ulimit摔了一跤...
  4. PHP 依赖注入,从此不再考虑加载顺序
  5. python语言map函数及map object at 乱码错误
  6. flash游戏代码_Flash正式宣告死亡,4399游戏还能玩么——从没有所谓的千秋万代...
  7. 解决gmpy2安装报错:# include “mpfr.h“ compilation terminated.error: command ‘gcc‘ failed with exit status 1
  8. linux之移动或重命名文件:mv
  9. Java实验9 T6.将对象和数组存储在dat文件中
  10. Feature flag,一个让软件发布轻松不掉发的神技
  11. Uber宣布停止无人卡车项目,研发重心将转向无人小汽车
  12. docker redis 删除集群_基于Docker的Redis集群实践
  13. android浏览系统分区,Android系统分区
  14. vmware之VMware Remote Console (VMRC) SDK(一)
  15. Java开发手册黄山版新增规约摘录
  16. 使用google analytics(分析)监测百度竞价关键词效果(网址构建工具)
  17. 生活中常用的汉字?有4600个。都有哪些呢?
  18. Image Matting 图像抠图技术与深度学习抠图
  19. 成功解决excel表格隐藏后右键全选列取消隐藏始终找不出来
  20. Android 端app直播源代码,解决系统启动黑屏

热门文章

  1. ORACLE 中ROWNUM用法总结!
  2. MYSQL 5.7 INNODB 表空间
  3. Netty技术细节源码分析-MpscLinkedQueue队列原理分析
  4. Java线程类的继承结构
  5. Spring 事务使用详解
  6. Maven 每次update之后自动修改jdk问题
  7. 操作系统——进程的状态及转换
  8. 分布式事务模型--Saga
  9. exports,和module.exports 的区别
  10. QuickMan 手记 - Activiti 环境搭建