当前位置:首页 » 网页前端 » pdf添加js脚本实例
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

pdf添加js脚本实例

发布时间: 2023-02-15 04:12:51

❶ 可以在pdf文档中添加js代吗用什么工具

没有专门工具
只有木马类的病毒

❷ 如何创建pdf的buffer,让pdf.js实现预览pdf文件

PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。简单说就是一个 PDF 解析器。运用HTML5JavaScript(即pdf.js仅使用安全的web语言,不包含任何攻击者可以用的本地代码块)的PDF阅读器pdf.js,直接在标准的HTML页面上载入和渲染PDF文件, 还可以提高安全性(不需要安装第三方插件,安全性由浏览器保证),浏览器所做的安全措施已经为pdf.js提供了安全的运行环境。其对IE和 FireFox浏览器的要求是IE9+, FireFox19+。
在线示例: 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/

pdf.js VS 传统浏览器读取pdf

一般来说,PDF档案格式都是在浏览器中由外挂程式来描绘,通常是Adobe自己的PDF reader或来自其他供应商的描绘工具,但这些外挂通常无法充分运用PDF的特点,而且由于含有大量的受信任代码,使得Google Chrome浏览器必须运用SandBox沙箱原理,来检查PDF描绘工具是否遭到未知病毒感染。
使用adobe,必须在本地安装软件才能使用,而pdf.js不依赖环境、渲染速度快(测试过,确实很快)、安全性高。

pdf.js渲染PDF文件
pdf.js渲染PDF文件的流程:Fetch pdf (url / buffer) ——> canvas ——> 渲染
如果要深入pdf的渲染,需要去研究pdf.js源代码。pdf.js可通过pdf文件的地址或pdf数据流获取pdf,具体实现是调用接口函数 PDFJs.getDoc(url/buffer)将pdf载入html,通过canvas处理, 然后渲染pdf文件。网上给出的都是通过url来获取pdf的例子,而我在做项目的时候,后台(python)要求是发pdf的数据流给前台,前台接收pdf的buffer,然后通过pdf.js来渲染。当然最初尝试buffer出现了很多问题,具体问题总结如下:
1)如何通过$.ajax接收后台发给前台的buffer数据;
2)如何将buffer传给pdf.js来处理(这里我使用了viewer.js, 所以需要考虑的是如何将buffer传给viewer.js来处理);
3)如何将pdf.js转换成pdf.js可以接收的buffer格式;
(对应问题解决见代码注释)
注:viewer.js是pdf.js的扩展,其将打印、翻页、缩放等功能进行了实现,且界面非常好看。也就是说如果你引入了viewer.js,pdf的渲染和渲染之后的功能界面都已经帮你实现了,你不用自己去写界面。

先从官网:http://mozilla.github.io/pdf.js/ 下载代码,然后使用文件viewer.html , 我的html就是在viewer.html 的基础上修改的,下面我给出buffer的例子:
<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<title>在线预览</title>
{% load static %}{% get_static_prefix as STATIC_URL %}
<link href="{{STATIC_URL}}css/preview.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{STATIC_URL}}pdfjs/web/viewer.css"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/compatibility.js"></script>
<link rel="resource" type="application/l10n" href="{{STATIC_URL}}pdfjs/web/locale/locale.properties"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/l10n.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/build/pdf.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/debugger.js"></script>
<script src="{{STATIC_URL}}js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">

//convertDataURIToBinary()
//不知道什么原因如果后台直接将pdf的数据流发给前台,得到的是乱码,将数据转换成 Uint8Array始终不成功
//所以就让后台将发送之前的数据流做 了base64编码发给前台,前台再解码得到的数据就不是乱码了。
var BASE64_MARKER = ';base64,';

var preFileId = {{mark}};

//viewer.js全局变量,传入buffer,回答问题2
var DEFAULT_URL

$(document).ready(function(){
$.ajax({
type:"post",
async: false,
//ajax接收pdf数据流,注意dataType值的设置是否有错,如果不指定,jQuery将自动根据HTTP包MIME信息返回
//responseXML或responseText . 回答问题1
contentType:"application/pdf;charset=utf-8",
url:"{% url netPan.File.views.browserFuf%}",
data:{
id: preFileId
},
success:function(data){
var pdfAsDataUri = data;
//如果引入了viewer.js , 处理方法
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;
// 只引入了pdf.js, 未引入viewer.js, 处理方法
// var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
// PDFJS.getDocument(pdfAsArray).then(); 自己写pdf的处理函数
}
});
});

function convertDataURIToBinary(dataURI) { //编码转换,回答问题3
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;

//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));

for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
</script>

<!--先设置全局变量DEFAULT_URL 的值,所以要后调入viewer.js -->
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/viewer.js"></script>
</head>

<body>
省略内容
</body>
</html>

❸ 如何在PDF文件中调用JAVASCRIPT

java可以利用iText(也有其他语言的)来加入:
PdfReader reader = new PdfReader("c://1.pdf");
PdfStamper stamper = new PdfStamper(reader,new FileOutputStream(“c://new1.pdf”), '\0',true);
PdfWriter writer = stamper.getWriter();
PushbuttonField button = new PushbuttonField(writer, new Rectangle(450, 750, 530, 800), "post");
PdfFormField submit = button.getField();
submit.setAction( PdfAction.javaScript("app.alert(‘hello,lec’)", writer));
stamper.addAnnotation(submit, 1);
具体就可以去查看iText是怎么使用的

❹ 如何于使用itext在PDF档内加javascript时宣告script name

您好,希望以下回答能帮助您
首先用iText原先的PDF档写入另一个副本, 我只能够复制一个页数及页面长阔与原档相同的副本, 但内容会自动rotate了90度,按它的指引用iText增加Javascript入现存的PDF档,
用iText宣告一个script Name(In the JavaScript Functions dialog box, type myOnMessage as the Script Name, and then click the Add button."), 结果javascipt加了(61 - 101行), 但不能搭配flex使用.
如您还有疑问可继续追问。

❺ 如何用js生成pdf

1,生成 PDF 这种事情通常由服务器端做
2,浏览器做的话要依赖于插件(ActiveX/Plugin,通常购买第三方的)
3,浏览器预览、打印倒是没问题(要装 PDF viewer,Firefox 自带的 PDF.js 扩展也可以)
4,总结,AngularJS 是浏览器端的,干不来这事儿,也不应该干这事儿,我想你最好换个方向

❻ pdf.js实现文字可复制并且选取文字背景不一致,修改选取文字背景

一、安装和引入pdf.js包。(这里不再做过多的赘述)

二、渲染pdf,同事添加div,进行用来存储文字,保证文字可以被选取复制。

通过input标签获取到数据文件,然后通过getPDF()方法进行渲染。

renderPDF()方法

至此,其实已经实现了pdf文字可复制的要求。但是,由于各个div里的文字宽度和高度的不同,导致选取文字的时候,选取的背景颜色不同统一,需要进行统一背景样式。

思路:渲染完成pdf以后,监听页面的鼠标按下事件和鼠标弹起事件。当用户选取文字完成以后,获取选取文字的长度和宽度,获取选取文字距离上边框和右边框的值。通过获取的值来创建div并设置长度宽度以及背景颜色,对文字进行遮罩,最后取消用户选择的文字。

1、首先确认鼠标点击相对文档的开始位置:

2、确认用户选取的文字是从哪开始,在哪结束。

3、最后通过applyColours()进行渲染。

applyColours()判断了很多种情况,当用户值选择了一行的情况,当渲染的文字有还行递归调用回来的等多种情况。同事判断是否换行是通过第一个节点与第二个节点的top值绝对值是否大于10,大于10就表示换行。同时,节点后面两个节点如果就调用另外一个渲染方法。

otherMothodload()方法:

至此,任务完成。

效果入下图:

未优化前:

优化后:

这种方法虽然实现背景的渲染,但是存在几个问题:

1、渲染第一行文字的位置是通过鼠标按下的位置来确定的,但是当用户鼠标按下的位置与选取的文字的位置偏差较大,会导致渲染的div与选取的文字位置有偏差。如下图:

2、选取文字的长度和宽度是通过获取文字的内容,文字的size,以及文字的字体。再页面中创建一个span标签,然后把文字带进document里,获取到宽度和高度。这种方法有些文字渲染出来的长度太长。如下图:

附上获取长度和宽度的方法:

以上两个问题,希望有大神给我一点思路和解决方案。欢迎小伙伴跟我一起讨论。

附上项目github:https://github.com/caohelen/pdfjs

❼ JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

本文实例讲述了JS实现的将html转为pdf功能。分享给大家供大家参考,具体如下:
<!DOCTYPE
html>
<html>
<head>
<title>jsPDF插件</title>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8">
<script
src="https://code.jquery.com/jquery-git.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
</head>
<body>
<p
class="pdf-wrapper"
="to-pdf">HTML
content...<h1>中文</h1>
中国,汉字,测试:合同
模版
中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国</br>中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国....................<br/>
中国,汉字,测试:合同
模版
...................<br/>
计费
接口
....................<br/>
<img
src='http://www.jb51.net/images/logo.gif'/>
</p>
<script
type="text/javascript">
var
pdf
=
new
jsPDF('p','pt','a4');
pdf.internal.scaleFactor
=
1;
var
options
=
{
pagesplit:
true
};
//$('.pdf-wrapper')
pdf.addHTML(document.body,options,function()
{
pdf.save('web1111.pdf');
});
</script>
</body>
</html>
运行效果:
更多关于JavaScript相关内容可查看本站专题:《JavaScript扩展技巧总结》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:jsPDF导出pdf示例jsPDF生成pdf后在网页展示实例使用jspdf生成pdf报表phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)JS导出PDF插件的方法(支持中文、图片使用路径)js插件方式打开pdf文件(浏览器pdf插件分享)用Javascript检查Adobe
PDF插件是否安装的实现代码纯js实现html转pdf的简单实例(推荐)基于Phantomjs生成PDF的实现方法JavaScript+Java实现HTML页面转为PDF文件保存的方法JavaScript代码生成PDF文件的方法

❽ 如何创建pdf的buffer,让pdf.js实现预览pdf文件

纯Java的解决方案:我们首先想到的自然就是JDK1.4提供的JPS(JavaPrintingService)啦,不过,这东西虽然说支持PDF的Flavor,但是,不管是个人实验还是网上他人的评论,好像根本就是useless,可能如果说你的打印机Driver支持PDF的Flavor的话,JPS会检测到你的driver的这个特性,能够成功的打印PDF文档出来,但是,大部分情况下,这种情形是不成立的,故此JPS死路一条啦!让我们看看PDF的老家Adobe那里有没有什么法宝,我们发现一个ViewerBean的组件,说是可以将PDF以Bean组件的方式潜入到Swing中,哇,太爽了,不过慢着,协议上说不提供任何支持,也不保证不出任何问题,管那么些,试过再说,一实验才知道,靠,Exception频发,而且这个组件较为陈旧,还是扔一边吧!还有一个PDFBox,OpenSource的,不过对中文支持不好,而且好像开发进度也不是很好,没有发布一个正式的版本,基本上不能用于生产环境;最后,求助于Commercial的产品吧,实验了一下ActiveTree的JPrint,感觉不错,完全可以胜任我们的需求而且恰到好处,不过授权费很贵,Email问过之后的答复是2000USD的最低购买,呵呵,虽然日本人很有钱,但也心疼这个银子啊,所以最终也得作罢!(ActiveTree的授权其实挺令我ft的,他其实在2003年的时候是可以免费使用的,但之后就变卦了,呵呵,当时记得我还给提过一些bug之类,算了,人家做出这个东西也不容易)其他商业产品也是价格不菲,所以,基本上纯Java的solution到这里就否决了,让我们看Java-Com的解决方案吧!Java-Com的解决方案:在前一条路走不通之后,我痛定思痛,决定转向自己不熟悉的领域,ms的领地,我打算从Java中调用Com组件,由Com组件来帮助我们实现PDF的打印工作,不够这条路也不是一帆风顺那!我们知道,AcrobatReader在发布的时候会随同发布一个支持浏览器的com组件用来manipulate他的这个PDF文档格式,所以,我们想要本地调用这个随同发布的Com组件来实现PDF打印。虽然Version5,6,7的这个组件格式不一样(5,6是以ocx的格式发布,7是以dll的格式发布),但是,不管那么些,先从7开始吧!要调用com,那么我们需要一个从java到com的Bridge,所以,jacob第一个跃入我的脑海,因为之前就用过嘛!但是麻烦来了,我们并不知道这个com组件提供了那些调用接口啊!哎,没法,回学校求教熟悉.net的同学,给好不容易弄出几个需要的调用方法(哎,可怜我的周末啊),星期一就回来用jacob调用啦,可是左试右试就是一直抛异常,我那个气啊!难道是jacob的为问题?!我就又找了jcom和jcom2等类似的产品,但jcom全是日文文档,没有法,而jcom2估计也是一个德行(我忘了为什么当初否决了这个),所以就决定试一试商业产品吧!这方面的商业产品主要有J-Integra,JPanel(好像叫这个名字)以及一个叫JNIWrapper的产品(这个是一个人用用来演示在java中使用Acrobat5打印PDF的时候提到的)。这些商业产品好的地方就是他可以根据某个你要调用的com组件为你自动生成相应的Proxy对象java代码,这样你就可以直接调用你熟悉的java代码了。像jacob等开源项目,如果给出一个类似的codegeneration工具的话,就完全不逊于这些商业产品啦。鉴于商业产品的价格,我最终还是否决了这些(日本人其实也听抠门的)。这样,Java-com也对这个问题没辙了。不过,最后在我的解决方案中,我还是使用了Jacob,这是后话,暂且不提那我们考虑一下,如果PDF打印不行,打印其他格式行不行?!比如图片,这个JPS可以完全打印,所以,我们找一下有没有将PDF格式转换为其他格式的工具吧!PDF格式转换的解决方案:在这个领域,主要的就是有GhostScript/GView和ImageMagick,前者可以将PDF格式转换为PostScript格式,但是好像GhostScript也不能用JPS完全打印出来;而后者是一个将PDF转换为Image的API工具,他的Java实现叫JMagick,但他有一个跟GhostScript同样的问题,就是要转换,就必须在本地安装,然后通过命令行的方式调用,这个显然也不是很好,而且集成性很差,还是作罢!剩下的一个是命令行调用啦,这是从itext网站找到的,你可以通过在命令行运行AcroRd32/p/h"pathtoPDFfile"这样的命令来打印你要打印的PDF文件,当然,你可以在PDF文件生成后就将他们依次放入一个批处理文件来执行这些打印命令,但是这个方案唯一的问题就是,每打印一个文件都会启动一个AcrobatReader窗口而且必须手动关闭,这现在不能满足目前的系统要求。好了,所有的方案基本上都罗列完了,也没有找到一个可行的方案:-((没有银子嘛,不然Activetree的JPrint不错的说)这些东西差不多郁闷了我3,4天吧,那几天简直就是boredtodeath.不过,在郁闷的这几天的结尾,却有一道灵光闪过我的脑海能不能说启动一个打印service,当文档要打印的时候,直接发送给它就行了那?!而恰好我发现一段在网页中加载PDF文档的Javascript代码,而且完全可以使用js来控制PDF的打印,所以,最终的这个方案就浮出水面了1-使用jacob启动一个IE进程,并隐藏IE窗口;if(ieAutomation==null)ieAutomation=newActiveXComponent("InternetExplorer.Application");ieAutomation.setProperty("Visible",newVariant(false));2-PDF前端在生成PDF文件之后发送生成后的文件到JacobPDFPrinter,JacobPDFPrinter根据出入的PDF文件的全路径使用Velocity模板引擎动态生成一个包含使用Javascript代码实现的PDF打印逻辑的HTML文档(当然,使用Velocity生成文档这部分逻辑我们单独抽出到VeloIEPrinterGenerator类中);3-在HTML生成之后,在JacobPDFPrinter中就可以使用jacob调用IE的Navigate2,将IE重定向到刚才生成的这个HTML文件啦,这样,IE就会在后台调用JS代码将PDF打印到默认打印机;4-打印成功之后,清除临时动态生成的HTML文件;5-当主程序退出之前,Quit后台IE进程。以上就是我能给出的一个solution,并不完美,但itworks.需要注意的几个问题是:(1)需要设置IE的一个高级选项,运行本地脚本运行;(2)因为Java和Com线程模型的不一致,导致在最终Quit后台IE进程的时候会抛出Com调用异常,因为对于Win平台API以及相关编程模型不是很熟悉,所以,这个问题需要求助于别人帮忙解决;(3)IE在执行JS打印PDF的时候,同样会后台启动Acrobat的一个进程,而这个进程我们程序中无法控制其生命周期,所以,主程序退出后,我们没有法同时kill这个进程,好在不管我们运行多少次,这个进程在后台只有一个,所以,性能负担不是很大;转载