天道酬勤,学无止境

解决pdf.js预览pdf不显示签名问题(两条路)

解决pdf.js预览pdf不显示签名问题(两条路)

解决这个问题的方法很有意思,解决这一类问题的思路就是:如何不让pdf.js抛出异常或者警告。【其实乍一看好像和问题本身并不沾边,哈哈】

电子签章不显示,好像也可以按照这个来解决。

问题截图:

  • 签字栏 这三个格里是有签的名字的,不过预览的时候不显示而已。
    在这里插入图片描述
  • 控制台的警告截图:
    在这里插入图片描述
    或许你的不是 Sig 的问题,但是差不多的话,我下面说的第二条路比较适合你。

第一种方法:网上普遍的方法——注释法

注释掉pdf.worker.js里的这三行代码:【我的是新版pdf.js 在19867行】

// if (data.fieldType === "Sig") {
//   data.fieldValue = null;
//   this.setFlags(_util.AnnotationFlag.HIDDEN);
// }
  • 一般情况下,注释掉了这三行代码,不显示的签名或者电子签章就该显示了。
  • 但是,总有一些稀奇古怪的文件的在作祟,导致问题不断,就比如我遇到的情况:
    • 我注释了这三行代码,还是报错误,而且是 util.js 报的【蒙圈+1】,并且我看了一下util.js的文件路径是 webpack://pdfjs-dist/build/pdf.worker/src/shared/util.js【蒙圈+2】。
  • 很明显,如果跟util.js杠上,失败的绝对是我。。。经过我的分析,衍生了第二种方法。

第二种方法:本人的方法——一行 if 语句的无敌阻断法

这里我们可以回味一下本文开篇说的那句话——如何不让pdf.js抛出异常或者警告

我们在pdf.worker.js里找一下这个错误报的位置:

在这里插入图片描述
很像吧,只需要把 fielType 替换成 Sig,那这句话 console 出来就和 控制台警告截图 中的句子一模一样。

后面经过我的求证,我打印出来的 fieldType 确实是 Sig,那这就找到抛出警告的地方了。

接下来就是 阻断它:

if(fieldType !== "Sig") {
  (0, _util.warn)('Unimplemented widget field type "' + fieldType + '", ' + "falling back to base field type.");
  return new WidgetAnnotation(parameters);
}

一句 if 语句完事 ,当 fieldType 不是 Sig 时才走下面的语句。

看效果:

在这里插入图片描述
完结-撒花

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • h5页面预览pdf文件_PDF 文件在线预览(pdf.js 使用教程)
    来源:SegmentFault 思否作者:会鹏 因项目开发需要在线展示 PDF文件,为解决 PDF文件 在浏览器打开后电子签章、电子签名等展示不全且部分浏览器兼容问题特利用pdf.js解决该问题; pdf.js框架为HTML5,无需任何本地支持,兼容性极好只要浏览器支持 HTML5 即可(据说 IE9 以上都是可以的); 当时解决该问题探索时间比较长,其实也并没有想象的那么困难比较简单特此记录下此博客,以便大家参考! pdf.js git地址 :https://github.com/mozilla/pdf.js (也可上 pdf.js官网自行下载包) 有相关基本简介、获取源码及构建 以自行下载包为例 项目构建后 会出现如下两个静态文件夹: build目录是PDF.js的核心文件,web目录是PDF.js的配置与显示文件 viewer.html是用来显示PDF文件的跳转页面,viewer.js是其对应配置文件,在viewer.js中: 静态替换PDF文件路径 此时便可通过访问viewer.html对应路径查看并操作当前 静态PDF文件路径 有的小伙伴会说了这根本满足不了当前项目需求嘛 谁的PDF文件会是静态的 对喽 想到这就说明大家在思考了那么接下来我就向大家简单介绍下动态生成的PDF文件地址该如何赋值~ 首先要注意我们的PDF文件有两种方法可以带入进viewer.html中展示
  • 跨平台(uni-app)文件在线预览解决方案
    1024刚过,也祝愿各位码友在今后生活中,身体健康,事事顺心,再无Bug。 一、前言 之前写过一篇文章关于上传目录文件:uni-app系统目录文件上传(非只图片和视频)解决方案,这次来解决文件预览问题。   uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。在做业务系统时,不可避免会遇到文件在线预览的需求。这里的文件包括PDF、Word、Excel、PPT、图片等。而在线预览不是下载后再用本地软件或浏览器打开预览,而是直接通过文件流的形式查看。本方案主要解决在线预览问题,以及在uni-app开发过程中遇到一系列问题。   如果有欠缺的地方,或者有更好的方案,还望各位码友多提意见,多多交流,文章最后可以加我。 文件预览,首先会想到pdf预览,前端做pdf预览,首先也会想到pdf.js,那我们就从pdf.js说起。 二、PDF预览 pdf.js开源地址和在线例子 Github Online Demo 2.1 使用方法一 下载插件包,下载地址 解压,拷贝build和web目录到项目hybrid->html目录下,参考uni-app中web-view用法 新建vue组件file-preview.vue viewerUrl:前端本地viewer
  • pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。
    pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决。 svg模式渲染存在缺陷,只能渲染普通pdf,带签名、印章的可能会渲染不全,报错,pdf.js官方目前没有给出解决方案 canvas模式本质是图片,默认进去的时候,图片在手机端被缩放,不是原分辨率,所以失真模糊。所以需要放大查看pdf pdfh5博客主页 pdfh5项目GitHub地址 react、vue均可使用 example/test是vue使用示例,vue示例展示axios调用接口展示pdf,跨域代理,相对路径等方法 example/react-test是react使用示例 更新信息 2020.07.30 更新: 更新jquery版本至jquery-2.1.1.min.js pdfh5在线预览 (建议使用谷歌浏览器F12手机模式打开预览) https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf 快速使用(有两种方式) 一、script标签引入方式(需下载本项目文件夹css/pdfh5.css、js内所有文件) 1.引入css <link rel="stylesheet" href="css/pdfh5.css" /> 2
  • pdfh5.js移动端展示预览打开pdf文件
    pdfh5.js移动端展示预览打开pdf文件 pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决。svg模式渲染存在缺陷,只能渲染普通pdf,带签名、印章的可能会渲染不全,报错,pdf.js官方目前没有给出解决方案canvas模式本质是图片,默认进去的时候,图片在手机端被缩放,不是原分辨率,所以失真模糊。所以需要放大查看pdf 使用示例:(两种方法) 一、script标签引入方式(需下载本项目文件夹css/pdfh5.css、js内所有文件) 引入css <link rel="stylesheet" href="css/pdfh5.css" /> 创建div <div id="demo"></div> 依次引入js(需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的) <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script> <script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-2.1.1.min.js" type=
  • vue-pdf解决显示无法显示中文、中文打印预览乱码
    vue-pdf解决显示中文乱码和打印预览乱码 1.正常的vue-pdf使用 1.1 安装vue-pdf cnpm install vue-pdf --save-dev 1.2 简单使用 <template> <pdf src="./123.pdf"></pdf> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf } } </script> 1.3 分页、打印 <template> <div id="showpdf"> <el-row> <el-col :span="24" style="padding:10px;"> <div style="width:100%;text-align:center;padding-right:20px;"> <el-button type="primary" size="mini" @click="changePage(-1)">首页</el-button> <el-button type="primary" size="mini" @click="changePage(0)">上一页</el-button> <span style=" margin-left:20px;margin-right:20px;"> 共 {
  • 推荐的将PDF嵌入HTML的方法?(Recommended way to embed PDF in HTML?)
    问题 将PDF嵌入HTML的推荐方法是什么? iFrame? 目的? 嵌入? Adobe对此有何评价? 就我而言,PDF是动态生成的,因此在刷新之前无法将其上载到第三方解决方案。 回答1 最好的方法可能是使用PDF.JS库。 它是用于PDF文档的纯HTML5 / JavaScript渲染器,没有任何第三方插件。 在线演示:http://mozilla.github.com/pdf.js/web/viewer.html GitHub:https://github.com/mozilla/pdf.js 回答2 到此为止,这是快速,容易的,并且不需要任何第三方脚本: <embed src="http://example.com/the.pdf" width="500" height="375" type="application/pdf"> 更新(2/3/2021) Adobe现在提供了它自己的PDF Embed API。 https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html 更新(1/2018): Android上的Chrome浏览器不再支持PDF嵌入。 您可以使用Google云端硬盘PDF查看器解决此问题 <embed src="https://drive.google.com/viewerng/ viewer
  • Vue项目利用pdf.js/iframe/embed实现在线预览pdf文件
    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了。 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js。 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷… 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" width="100%"></iframe> 缺点: (1)不兼容IE,因为iframe毕竟不规范,IE已经不采用它了 (2)下载弹窗!!!每次打开预览都弹出下载弹窗,用户体验极度不好 2:embed embed和iframe感觉差不多的东西,用起来感觉一样简洁明了,打开IE效果也还行,但仍然无法避免下载弹窗的干扰。 <embed src="http......" width="100%" height="400" /> 3:pdf.js(效果感觉最好) 实现步骤: (1)下载pdf.js文件 因为pdf.js文件比较多,我们要用的只是核心文件,所以将核心文件抽出来(已处理跨域报错)。点击下载核心文件 (2)在static中引入核心文件 (3)使用 <template> <iframe :src="pathUrl"
  • React中进行PDF预览(PDF预览文字消失问题)
    一,PC 1.在 pc 端浏览器中,最好用的方法是使用浏览器自带的 <a /> 标签进行预览: 直接通过 a 标签进行预览 // a标签属性会连接到队形的 url 地址,所以如果url是一个以.PDF结尾的链接,浏览器会直接在浏览器打开 // type属性规定被链接文档的的 MIME 类型相对性的类型文件会在浏览器打开 <a href="https://pdfobject.com/pdf/sample-3pp.pdf" type='application/pdf'>PDF</a> 通过动态创建 a 标签进行预览 // 这种情况适用于文件流PDF预览 // 通过文件流创建 url const url = window.URL.createObjectURL(new Blob([file],{type:'application/pdf'})); // 创建 a 标签 const link = document.createElement('a'); // 把 url 赋值给 a 标签 link.heft = url; // 配置 a 标签在新一页打开 link.target = '_blank'; // 设置点击事件 link.click(); // 清除 a 标签 link.remove(); // 释放 url 因为通过URL
  • 解决pdf.js预览pdf文件流(base64)亲测可用
    ** 解决pdf.js预览pdf文件流(base64)亲测可用 ** **我们需要上传pdf文件时支持预览,因为文件尚未传到服务器,所以不存在取后台取文件了,但是我们前端的小哥也没有获取选择的文件的本地路径,只抛给我一个base64码,很尴尬。。。。。 去网上查阅了很多资料,很少有这方面的文章,遂记下来,以备以后用到。 我用的是pdf自带的viewer.html页面。 直接上代码:** 首先pdf.js官网下载:官网下载地址 我下载的是es5兼容低版本的 1.下载好后,解压出来,结构如下: 2.直接从本地打开web/viewer.html文件,但是注意,pdf这类文件会跨域,所以必须放到服务器上才可以预览。 放到服务器上就是http://mozilla.github.io/pdf.js/web/viewer.html,并不会报错,或是开启本地服务localhost,不知道的可以下下载HBuilder直接开启本地服务 像上图一样,直接在viewer.html文件,点击上面谷歌浏览器,直接开启本地服务 此时我们需要解决的是将base64如何传入这个插件中并在线展示 3.在web/viewer.html中添加代码 <script type="text/javascript"> var DEFAULT_URL = ""; var pdfUrl = document.location
  • Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
    今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html 首先该项目为Vue Cli脚手架构建的项目所以没有常见的静态资源包static,所以我在src平级新建了static文件夹,但是发现并不能访问到viewer.html pdf.js下载地址:pdf.js下载地址 下载后解压复制到static 页面: <iframe :src="src" width="100%" height="97%" frameborder="0"> </iframe> js data() { return { src: "", // pdf文件地址 viewerUrl: '/static/js/pdf/web/viewer.html', // 要访问的pdf的路径 fileUrl: 'http://47.101.183.8:8088/test.pdf', } }, methods: { getSrc(src){ getPicUrl({ fileKey: src }).then(res => { if (res.data.code === 200) { this.src=`${this.viewerUrl}?file=${encodeURIComponent
  • 使用PDF.js实现前端和手机端网页预览PDF文件(可定制,支持本地文件、Base64编码和远程URL跨域方式)
    1.插件下载地址:https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到: 2.把pdfjs-1.10.88-dist放到项目静态资源中,在自己的页面中通过iframe链接到pdfjs-1.10.88-dist/web/viewer.html文件中。 3.访问自己的页面,默认就是本地文件的方式打开PDF文件,可自行指定viewer.js文件中 DEFAULT_URL的值为需要预览的文件路径,可以把下图的代码行注释掉,到viewer.html中嵌入<script>标签在里面重新定义该变量为需要预览的本地文件。 4.Base64方式预览 (1)界面定制:默认的viewer.html页面功能太强大了,在手机端项目不需要,这里会提供快速的裁剪代码。 先给出效果图: (2)你需要copy的代码(完全不用修改,但是一定要把步骤3中的代码行注释掉!!) 在viewer.html文件中: <script src="../build/pdf.js"></script>和<script src="viewer.js"></script>之间插入下面的代码 <script src="../build/pdf.js"></script> <script type="text/javascript"> function
  • 无需打开即可打印 pdf(Print a pdf without visually opening it)
    问题 我想要构建的是,通过单击一个按钮,我想触发 PDF 文件的打印,但不打开它。 +-----------+ | Print PDF | +-----------+ ^ Click *---------> printPdf(pdfUrl) 我第一次尝试的方式是使用 iframe: var $iframe = null; // This is supposed to fix the onload bug on IE, but it's not fired window.printIframeOnLoad = function() { if (!$iframe.attr("src")) { return; } var PDF = $iframe.get(0); PDF.focus(); try { // This doesn't work on IE anyways PDF.contentWindow.print(); // I think on IE we can do something like this: // PDF.document.execCommand("print", false, null); } catch (e) { // If we can't print it, we just open it in the current window window
  • uni-app钉钉小程序pdf预览
    我们在web端pdf预览一般都是直接打开或者是使用插件来打开,当下最流行用的pdf插件就是pdf.js,但是在小程序中是无法直接打开pdf链接的,这时候就会想,那能不能使用pdf.js插件来打开呢?实际上是可以实现的,不过需要结合web-view来使用(web-view是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面)。下面就来具体说说是如何实现的。 1、到pdf.js官网(官网)下载插件放到你的项目里面,下载稳定版。需要注意的是在钉钉小程序开发者工具中点击预览会报错,报错的原因是说不支持文件名包含@的图片,所以只要把下载的pdf.js文件夹中web/images里的带@的图片全部删除就可以了。 2、使用,直接上代码 <template> <view><web-view :src="pdfUrl"></web-view></view> </template> <script> export default { data() { return { // 下载的psf.js插件中的viewer.html路径 viewerUrl: '/static/pdf/web/viewer.html', pdfUrl: '' }; }, methods: { init() { let url = '后端接口返回的pdf地址'; // encodeURIComponent
  • 在 Ionic 中创建和显示 pdf(Creating and showing pdf in Ionic)
    问题 我正在使用 PDFMAKE 创建一个 base64 编码的 pdf,我试图通过将编码的 base64 提供给 iframe src 来使用 iframe 显示它。 它适用于 PC,但不适用于移动设备(android 和 ios)。 所以,最后我偶然发现了 Angularjs-PDF 来显示 pdf。 现在,我可以在移动设备中看到 pdf。 但是当我尝试为设备提供自定义宽度和高度时,它需要。 但是当我使用缩放功能时出现了问题,页面被缩放但它走出了屏幕。 我什至无法滑动或滑动来查看屏幕外的内容。 我想在客户端制作一个 pdf 并在 Ionic 中使用缩放功能向用户预览。 如果有人对此有任何解决方案,请分享,谢谢。 回答1 因此,对于我们公司的应用程序,我们使用了 angular-pdf Viewer: 这是pdf查看器模板的模板,放入离子滚动允许捏缩放并且效果很好。 <div ng-show="notLoaded" class=" center bar bar-subheader"> <h1 class="title">Loading PDF...</h1> </div> <div class="tabs tabs-icon-left"> <a class="tab-item" ng-click="goPrevious()"> <i class="icon ion-arrow
  • 如何使用JavaScript在浏览器中呈现Word文档(.doc,.docx)?(How do I render a Word document (.doc, .docx) in the browser using JavaScript?)
    问题 我已经成功完成了在浏览器中而不是“打开/保存”对话框中显示PDF文件的代码。 现在,我被困在试图在浏览器中显示Word文档的过程中。 我想在Firefox,IE7 +,Chrome等中显示Word文档。 有人可以帮忙吗? 在浏览器中显示Word文档时,总是会出现“打开/保存”对话框。 我想使用JavaScript实现此功能。 回答1 目前没有浏览器具有呈现Word文档所必需的代码,据我所知,目前也没有客户端库可用于呈现它们。 但是,如果您只需要显示Word文档,而无需对其进行编辑,则可以通过<iframe>使用Google Documents的查看器来显示远程托管的.doc / .docx 。 <iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe> 解决方案改编自“如何使用fancybox显示word文档”。 例子: JSFiddle 但是,如果您希望有本机支持,则在大多数(如果不是全部)浏览器中,我建议将.doc / .docx重新保存为PDF文件。Mozilla也可以使用PDF.js独立地渲染这些文件。 编辑: 非常感谢fatbotdesigns在评论中发布了Microsoft Office
  • vue中使用PDF.js实现PDF文件预览
    目前是直接使用npm install pdfjs-dist方式(目录如下图), 其中以下两个文件必须引入: import pdfJS from 'pdfjs-dist'; import 'pdfjs-dist/build/pdf.worker'; 这两个文件包含了获取、解析和展示PDF文档的方法,但是解析和渲染PDF需要较长的时间,可能会阻塞其他JS代码的运行。 为解决这个问题,pdf.js使用了Web Workers。 考虑到用户可能不会使用该文件预览功能,咱们可以使用按需加载的方式: components: { pdfViewer: r => require.ensure([], () => r(require('./pdfViewer')), '../pdfViewer') } 其中pdfViewer就是咱们实现的pdf预览组件。 <canvas id="pdf-canvas"></canvas> js代码 var url = 'test.pdf'; let loadingTask = pdfJS.getDocument(path); // 返回的是一个promise loadingTask.promise.then(pdf => { return pdf.getPage(1); }).then(page => { // 设置展示比例 var scale = 1.5; //
  • 基于SpringBoot的文件文档在线预览项目解决方案
    我们开发业务系统的时候,经常有那种文档文件在线预览的需求,今天介绍一款相对稳定,相对强大的文件文档在线预览开源解决方案-file-online-preview 开源地址: https://gitee.com/kekingcn/file-online-preview file-online-preview 此项目为文件文档在线预览项目解决方案,对标业内付费产品有【永中office】【office365】【idocv】等,在取得公司高层同意后以Apache协议开源出来反哺社区,在此特别感谢@唐老大的支持以及@端木详笑的贡献。该项目使用流行的spring boot搭建,易上手和部署,基本支持主流办公文档的在线预览,如doc,docx,Excel,pdf,txt,zip,rar,图片等等 项目特性 支持office,pdf等办公文档 支持txt,java,php,py,md,js,css等所有纯文本 支持zip,rar,jar,tar,gzip等压缩包 支持jpg,jpeg,png,gif等图片预览(翻转,缩放,镜像) 使用spring boot开发,预览服务搭建部署非常简便 rest接口提供服务,跨平台特性(java,php,python,go,php,…)都支持,应用接入简单方便 抽象预览服务接口,方便二次开发,非常方便添加其他类型文件预览支持 最最重要Apache协议开源
  • vue cli3项目使用pdf.js 前端实现(文件流)在线预览兼容IE,亲测可用
    第一步 导入pdf.js插件 下载地址 1.下载完成后打开 static 目录下 创建pdf文件夹放入build和web文件夹。 2.iframe 引入 :src=“pdf文件流地址”。 <el-dialog :visible.sync="dialogTableVisible"> <div class="pdf" style="height: 100%;"> <iframe :src="'/static/pdf/web/viewer.html?file='+ pdfUrl" style="width: 100%; height: 100%"/> </div> </el-dialog> 3.封装接口 agentHttp.js showPdf(url, data = {}) { return http({ responseType: 'blob',//blob类型 method: 'post', url, data: data, headers: { 'Content-Type': 'application/json;charset=utf-8' } }) } 4.封装api import agentHttp from '@/utils/agentHttp' function pdf(params) { return agentHttp.showPdf('/common
  • Vue项目中使用pdf.js预览pdf文件流
    Vue项目中使用canvas和pdf.js预览pdf文件流 网上目前的解决方案大多是在将pdf.js放在static文件内,这样j6angjin的后果就是打包文件变得非常大(我的项目由800k变大到将近5m),后来发现了pdf.js的node包pdf_dist这个给我们提供了一个新的方向,使用npm安装避免了打包文件过大的问题。 代码实现 <template> <div> <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas> </div> </template> <script> import service from '@api/main' import PDF from "pdfjs-dist"; import { staticUrl } from '@utils/config' export default { data() { return { PDFData:null, pages: null }; }, mounted() { let url=this.$route.query.url //ajax请求获取文件流,可根据自己需要修改 service.getPdfUrl(url).then( data=>{ this.PDFData = data let pdfurl
  • vue里怎么使用pdf.js实现pdf文件的预览功能
    说明 其实实现这个预览代码量很少,核心代码就一行,接下来我介绍一下这个实现过程 准备工作 你首先得准备一个 pdf 插件包,比如:我这边的项目包里的 src 文件夹的 static 文件夹下面就有一个 pdf 的插件包,里面包含 build 以及 web 两个文件夹。 自己去 http://mozilla.github.io/pdf.js/getting_started/#download 下载一个稳定版本的就行,目录大致如下 ├── build/ │ ├── pdf.js - display layer │ ├── pdf.js.map - display layer's source map │ ├── pdf.worker.js - core layer │ └── pdf.worker.js.map - core layer's source map ├── web/ │ ├── cmaps/ - character maps (required by core) │ ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes │ ├── debugger.js - helpful debugging features │ ├── images/ - images for the viewer