pdf.js

pdf打印预览 1.下载pdfjs插件链接： http://mozilla.github.io/pdf.js/ 2.pdfjs插件引入项目中： ①本地运行可将pdfjs放入vue项目的static文件夹下（本项目放在/static/pdf/下） ②如果在linux服务器部署建议将pdfjs单独放一个文件夹，打包可能引起访问路径的文件名发生变化，如果你有更好的方法，everything will be ok! 3.vue搞一搞 <el-button size="small" type="primary" @click="pdfPrint()">打印预览</el-button> pdfPrint() { this .$http({ // 首先需要生成pdf文件 url: `/project/outPdf/exportPdf`, method: 'post' , data: this .dataForm }).then(({data}) => { if (data && data.code === 0 ) { let url = '' // 根据本地和linux服务器pdf存放的位置进行配置 if ( this .$http.BASE_URL === 'http://127.0.0.1' ) { url = '/static/pdf/web/viewer.html?file=' }

在 《使用 pdf.js 在网页中加载 pdf 文件》 中详细介绍了 pdf.js 的使用与集成网页开发的基本方法。展示效果如下图： 站点的目录为 http://localhost:8033/PDFTest。此时PDF文件就部署在IIS站点的子目录下，这种方式访问一切正常。 var pdfFile = "http:// localhost:8033 /PDFTest/Pdf/项目的5个管理过程组和项目管理知识领域映射关系.pdf"; 如果PDF文件位于其他站点下，则涉及到 跨域访问 的问题。比如访问位于下列IIS站点中的PDF文件 var pdfFile = "http:// localhost:7030 /项目的5个管理过程组和项目管理知识领域映射关系.pdf"; 访问则出现如下错误。提示：跨域访问被禁止。 下面介绍方法来解决跨域访问的问题。 IIS站点中启用跨域访问 1、找到目标站点 2、找到“HTTP响应标头”，双击打开 右键--“添加”，添加以下2条： Access-Control-Allow-Headers：Content-Type, api_key, Authorization Access-Control-Allow-Origin：* 配置完成后，如下图 3、【停止】目标站点，【启动】目标站点。 4、重新访问该站点，PDF加载显示正常 如果访问还是出错，请执行

在网页中加载并显示PDF文件是最常见的业务需求。例如以下应用场景：（1）在电商网站上购物之后，下载电子发票之前先预览发票。（2）电子政务管理系统中查看发布的公文，公文文件一般是PDF格式的文件。 目前随着浏览器技术发展的不断成熟与强大，大部分的浏览器都支持直接把PDF文件拖到浏览器中显示，最方便的是这个操作不需要额外的插件支持。但是不同的浏览器加载显示PDF的效果不同。这时就需要专门的JS插件来处理。Mozilla开源了一个插件pdf.js，无需任何本地支持就可以在所有主流的浏览器上显示PDF文档，使用起来十分的方便。唯一的要求就是浏览器必须支持HTML5。 一、pdf.js 简介 官网地址： http://mozilla.github.io/pdf.js/ ，下载稳定版本，目前最新稳定版为v2.2.228 1、下载至本地： 2、解压缩，里面包含2个目录 build目录包含以下内容，其中 pdf.js是核心文件 web目录包含以下内容，其中 viewer.html是pdf查看器 3、在VS中打开viewer.html，引用了查看其的样式文件viewer.css、pdf.js核心文件、查看器脚本文件viewer.js 、资源文件local.properties。 4、 直接在浏览器中打开viewer.html，能正常的显示pdf查看器，但是无法显示pdf文件。 必须将 pdfjs-2

【推荐阅读】微服务还能火多久？>>> 第一步：下载pdf.js 下载地址： https://www.jsdelivr.com/package/npm/pdfjs-dist 打开后找到pdf.js、pdf.work.js以及cmaps路径下的全部文件，下载到本地或者直接引用其地址 实例代码 //HTML <canvas id="the-canvas"></canvas> //JS引用 <script type="text/javascript" src="../../script/pdf.js"></script> //JS使用pdf.JS代码 var url = 'test.pdf'; PDFJS.cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/';//字体解析 PDFJS.cMapPacked = true; //加载核心文件 PDFJS.workerSrc = '../../script/pdf.worker.js';//或者https://cdn.jsdelivr.net/npm/pdfjs-dist@2.3.200/build/pdf.worker.js var loadingTask = PDFJS.getDocument(url); loadingTask.promise.then

【今日推荐】：为什么一到面试就懵逼！>>> 文章目录 一、问题来源 二、解决 三、题外话 近期在处理网盘和在线文件相关问题，面对的事比较多且杂，记录下。 问题： seafile 自身预览PDF文件，部分不显示 图片显示如下： 一、问题来源 seafile 版本：7.0.5 原因： 原文件 pdf ，字体没有嵌入，所以需要本系统的字体渲染 seafile 使用 pdf.min.js ，而把对应 map 集成了。 解决这个问题，关键点在 seafile 的 pdf.js 二、解决 用 seafile 预览“有问题的” pdf ，且在浏览器里打开开发控制台 会发现，缺少对应 map 文件，如图： 解决步骤： 创建目录 /media/js/pdf/web/cmaps/ ，将 Adobe-GB1-UCS2.bcmap ， UniGB-UCS2-H.bcmap 这两个文件放在这个目录下面 文件可以在 github 里下载：https://github.com/mozilla/pdf.js/blob/master/external/bcmaps/UniGB-UCS2-H.bcmap $ root@3e1c6f87e1aa:/opt/seafile/seafile-server-latest/seahub/media/js/pdf/web/cmaps # ls Adobe-GB1-UCS2

本文章利用各个浏览器的内核支持PDF预览功能来做，PDF的预览网上说的最多的是PDF.JS实现预览，也找了好多文章，死活最后实现不了，通过这个方法解决了，如果有PDF.js解决的可以大家沟通交流下。 这里提一下，其他word和excel可以通过aspose代码转换成PDF，也很快有效。可以网上搜下，要想要的私信我，我发给你。 方法很简单，首先引入的都是IO的包。 import java.io.File; import java.io.FileInputStream; import java.io.OutputStream; import cn.huazx.ebp.common.io.IOUtils; 接下来就是在自己的后台controller里面写个方法。里面file的文件可以通过参数或是封装方式获取，这个里面的流不需要关闭，浏览器会自动获取然后展示。关闭的话浏览器就无法加载！ @RequestMapping(value = "/showpdf") public void showpdf(HttpServletRequest request, HttpServletResponse response, Model model) { try { File file = new File("D:/xyptFile/java.pdf"); FileInputStream

PDF.js是一个使用HTML5构建的可移植文档格式库。 PDF.js官网： http://mozilla.github.io/pdf.js/ 下载下来的压缩包包含两个文件夹：build和web，打开web文件夹下的viewer.html，就能看到PDF的预览效果了。 预览的PDF文件是位于viewer.html同目录下的compressed.tracemonkey-pldi-09.pdf， 而设置加载这个文件的地方是：与viewer.html同目录下的viewer.js的DEFAULT_URL属性，修改这个属性的值就能够预览不同的文件，中英文的pdf文件都能成功预览。 中文展示：修改viewer.html中的文件 <link rel="resource" type="application/l10n" href="locale/zh-CN/viewer.properties"> 需要添加MIME，否则会报404 .net core 添加方式 修改 Configure 中的 UseStaticFiles //添加MIME var provider = new FileExtensionContentTypeProvider(); provider.Mappings[".properties"] = "application/octet-stream"; app