jquery基礎pdf_jquery代碼是生成橫向pdf

⑴ 如何創建pdf的buffer，讓pdf.js實現預覽pdf文件

pdf.js簡介

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>


<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/viewer.js"></script>
</head>

<body>

省略內容

</body>

</html>

⑵ 實現在線瀏覽PDF文件的實用jQuery插件有哪些

在web開發當中我們經常需要進行需要在線瀏覽PDf內容，在線嵌入動態pdf，傳統的解決方法安裝客戶端PDF閱讀器，如果是在谷歌是可以在線瀏覽的，因為他自身就帶了一些插件，以前遇到這樣的問題往往是費時又費力，很不好解決，

今天就給大家分享一系列使用javascript實現的pdf插件效果，無需藉助第三方插件就可以實現在線瀏覽功能，非常實用。

PDFObject

PDFobject可以幫助你在頁面直接嵌入pdf文件，有時候有些項目需要動態地嵌入PDF文件。PDFObject為此而設計的，他能夠快速和容易的嵌入PDF文件，PDFObject使用JavaScript來產生相同的符合標準的標記，然後插入到您的HTML元素的選擇。您可以填滿整個瀏覽器窗口，或將PDF格式轉換成一個或其他塊級元素。

pdf.js

和 Google Chrome 使用的源自 Foxit 的閉源 PDF 瀏覽插件不同，PDF.js 是基於開放的 HTML5 及 JavaScript 技術實現的開源產品。

pdf.js 是一個主要用於HTML5 平台上在線閱讀PDF文檔的小插件，基於JavaScript技術編寫而成，無需任何本地技術支持。

pdf.js是由Mozilla Labs發布的。他們的目標是創建一個通用的，基於標準的網路平台，能夠解析和渲染PDF文件，並最終發布一個PDF閱讀器擴展，毫無疑問 pdf.js 將被整合入 Gecko 成為 Firefox 的內嵌 PDF 閱讀器，但是具體整合時間表尚未確定

jsPDF

jsPDF 是一個使用Javascript語言生成PDF的開源庫。你可以在Firefox插件，服務端腳本或是瀏覽器腳本中使用它。客戶端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暫不支持。。

jQuery Media Plugin

jQuery Media Plugin是一款基於jQuery的網頁媒體播放器插件，它支持大部分的網路多媒體播放器和多媒體格式，比如：Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根據當前的腳本配置，自動將a標簽替換成div，並生成object, embed甚至是iframe代碼，至於生成object還是embed，jQuery Media會根據當前平台自動判別，因此兼容性方面非常出色下面這段代碼是jQuery Media生成後的。

Google Docs PDF viewer

ZOHO Viewer

Anychart：使用JavaScript導出PDF

下圖可以導出為PNG或JPG格式的靜態圖像或嵌入式靜態圖像，圖表或一個完全互動的功能圖

jQuery Document Viewer

Document Viewer是一個jQuery插件，可以讓你在網頁中直接查看多種文件格式。文檔瀏覽器支持的文件格式：PDF文件，文本文件，代碼，圖像，音頻，視頻等。

⑶ 使用jQuery的PDF查看器問題，怎麼解決

jquery.media.js 插件實現在線預覽PDF文件

代碼：

[html]view plain

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>在線預覽PDF文檔</title>
<linkrel="stylesheet"href="bootstrap-3.3.7/css/bootstrap.min.css">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery.media.js"></script>
<scripttype="text/javascript">
$(function(){
$('a.media').media({width:800,height:600});
});
</script>
</head>
<body>
<center>
<divclass="panelpanel-primary">
<divclass="panel-heading"align="center">
<h2>預覽pdf文件</h2>
</div>
<divclass="panel-body">
<aclass="media"href="yulan.pdf"></a>
</div>
</center>
</body>
</html>

截圖：

⑷ 濡備綍浣跨敤Node.js鐖鍙栦換鎰忕綉欏佃祫婧愬苟杈撳嚭PDF鏂囦歡鍒版湰鍦

闇奼傦細

浣跨敤Node.js鐖鍙栫綉欏佃祫婧愶紝寮綆卞嵆鐢ㄧ殑閰嶇疆
灝嗙埇鍙栧埌鐨勭綉欏靛唴瀹逛互PDF鏍煎紡杈撳嚭
濡傛灉浣犳槸涓鍚嶆妧鏈浜哄憳錛岄偅涔堝彲浠ョ湅鎴戞帴涓嬫潵鐨勬枃絝狅紝鍚﹀垯錛岃風洿鎺ョЩ姝ュ埌鎴戠殑github浠撳簱錛岀洿鎺ョ湅鏂囨。浣跨敤鍗沖彲

浠撳簱鍦板潃:闄勫甫鏂囨。鍜屾簮鐮

鏈闇奼備嬌鐢ㄥ埌鐨勬妧鏈錛歂ode.js鍜宲uppeteer

puppeteer 瀹樼綉鍦板潃: puppeteer鍦板潃
Node.js瀹樼綉鍦板潃:閾炬帴鎻忚堪
Puppeteer鏄璋鋒瓕瀹樻柟鍑哄搧鐨勪竴涓閫氳繃DevTools鍗忚鎺у埗headless Chrome鐨凬ode搴撱傚彲浠ラ氳繃Puppeteer鐨勬彁渚涚殑api鐩存帴鎺у埗Chrome妯℃嫙澶ч儴鍒嗙敤鎴鋒搷浣滄潵榪涜孶I Test鎴栬呬綔涓虹埇鉶璁塊棶欏甸潰鏉ユ敹闆嗘暟鎹銆
鐜澧冨拰瀹夎
Puppeteer鏈韜渚濊禆6.4浠ヤ笂鐨凬ode錛屼絾鏄涓轟簡寮傛ヨ秴綰уソ鐢ㄧ殑async/await錛屾帹鑽愪嬌鐢7.6鐗堟湰浠ヤ笂鐨凬ode銆傚彟澶杊eadless Chrome鏈韜瀵規湇鍔″櫒渚濊禆鐨勫簱鐨勭増鏈瑕佹眰姣旇緝楂橈紝centos鏈嶅姟鍣ㄤ緷璧栧嚲紼沖畾錛寁6寰堥毦浣跨敤headless Chrome錛屾彁鍗囦緷璧栫増鏈鍙鑳藉嚭鐜板悇縐嶆湇鍔″櫒闂棰橈紙鍖呮嫭涓斾笉闄愪簬鏃犳硶浣跨敤ssh錛夛紝鏈濂戒嬌鐢ㄩ珮鐗堟湰鏈嶅姟鍣ㄣ傦紙寤鴻浣跨敤鏈鏂扮増鏈鐨凬ode.js錛
灝忚瘯鐗涘垁錛岀埇鍙栦含涓滆祫婧

const puppeteer = require('puppeteer'); // 寮曞叆渚濊禆
(async () => { //浣跨敤async鍑芥暟瀹岀編寮傛
const browser = await puppeteer.launch(); //鎵撳紑鏂扮殑嫻忚堝櫒
const page = await browser.newPage(); // 鎵撳紑鏂扮殑緗戦〉
await page.goto('https://www.jd.com/'); //鍓嶅線閲岄潰 'url' 鐨勭綉欏
const result = await page.evaluate(() => { //榪欎釜result鏁扮粍鍖呭惈鎵鏈夌殑鍥劇墖src鍦板潃
let arr = []; //榪欎釜綆澶村嚱鏁板唴閮ㄥ啓澶勭悊鐨勯昏緫
const imgs = document.querySelectorAll('img');
imgs.forEach(function (item) {
arr.push(item.src)
})
return arr
});
// '姝ゆ椂鐨剅esult灝辨槸寰楀埌鐨勭埇鉶鏁版嵁錛屽彲浠ラ氳繃'fs'妯″潡淇濆瓨'
})()
澶嶅埗榪囧幓浣跨敤鍛戒護琛屽懡浠 ` node 鏂囦歡鍚 ` 灝卞彲浠ヨ繍琛岃幏鍙栫埇鉶鏁版嵁浜榪欎釜 puppeteer 鐨勫寘錛屽叾瀹炴槸鏇挎垜浠寮鍚浜嗗彟涓涓嫻忚堝櫒錛岄噸鏂板幓寮鍚緗戦〉錛岃幏鍙栧畠浠鐨勬暟鎹銆

涓婇潰鍙鐖鍙栦簡浜涓滈栭〉鐨勫浘鐗囧唴瀹癸紝鍋囪炬垜鐨勯渶奼傝繘涓姝ユ墿澶э紝闇瑕佺埇鍙栦含涓滈栭〉涓鐨勬墍鏈<a> 鏍囩懼瑰簲鐨勮煩杞緗戦〉涓鐨勬墍鏈 title鐨勬枃瀛楀唴瀹癸紝鏈鍚庢斁鍒頒竴涓鏁扮粍涓銆
鎴戜滑鐨刟sync鍑芥暟涓婇潰涓鍏卞垎浜嗕簲姝ワ紝鍙鏈 puppeteer.launch() ,browser.newPage(), browser.close() 鏄鍥哄畾鐨勫啓娉曘
page.goto 鎸囧畾鎴戜滑鍘誨摢涓緗戦〉鐖鍙栨暟鎹錛屽彲浠ユ洿鎹㈠唴閮╱rl鍦板潃錛屼篃鍙浠ュ氭¤皟鐢ㄨ繖涓鏂規硶銆
page.evaluate 榪欎釜鍑芥暟錛屽唴閮ㄦ槸澶勭悊鎴戜滑榪涘叆鎯寵佺埇鍙栫綉欏電殑鏁版嵁閫昏緫
page.goto鍜宲age.evaluate涓や釜鏂規硶錛屽彲浠ュ湪async鍐呴儴璋冪敤澶氭★紝閭ｆ剰鍛崇潃鎴戜滑鍙浠ュ厛榪涘叆浜涓滅綉欏碉紝澶勭悊閫昏緫鍚庯紝鍐嶆¤皟鐢╬age.goto榪欎釜鍑芥暟
娉ㄦ剰錛屼笂闈㈣繖涓鍒囬昏緫錛岄兘鏄痯uppeteer榪欎釜鍖呭府鎴戜滑鍦ㄧ湅涓嶈佺殑鍦版柟寮鍚浜嗗彟澶栦竴涓嫻忚堝櫒錛岀劧鍚庡勭悊閫昏緫錛屾墍浠ユ渶緇堣佽皟鐢╞rowser.close()鏂規硶鍏抽棴閭ｄ釜嫻忚堝櫒銆

榪欐椂鍊欐垜浠瀵逛笂涓綃囩殑浠ｇ爜榪涜屼紭鍖栵紝鐖鍙栧瑰簲鐨勮祫婧愩

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.jd.com/');
const hrefArr = await page.evaluate(() => {
let arr = [];
const aNodes = document.querySelectorAll('.cate_menu_lk');
aNodes.forEach(function (item) {
arr.push(item.href)
})
return arr
});
let arr = [];
for (let i = 0; i < hrefArr.length; i++) {
const url = hrefArr[i];
console.log(url) //榪欓噷鍙浠ユ墦鍗
await page.goto(url);
const result = await page.evaluate(() => { //榪欎釜鏂規硶鍐呴儴console.log鏃犳晥
return $('title').text(); //榪斿洖姣忎釜鐣岄潰鐨則itle鏂囧瓧鍐呭
});
arr.push(result) //姣忔″驚鐜緇欐暟緇勪腑娣誨姞瀵瑰簲鐨勫
}
console.log(arr) //寰楀埌瀵瑰簲鐨勬暟鎹鍙浠ラ氳繃Node.js鐨 fs 妯″潡淇濆瓨鍒版湰鍦
await browser.close()
})()
涓婇潰鏈夊ぉ鍧 page.evaluate鍑芥暟鍐呴儴鐨刢onsole.log涓嶈兘鎵撳嵃錛岃屼笖鍐呴儴涓嶈兘鑾峰彇澶栭儴鐨勫彉閲,鍙鑳絩eturn榪斿洖錛
浣跨敤鐨勯夋嫨鍣ㄥ繀欏誨厛鍘誨瑰簲鐣岄潰鐨勬帶鍒跺彴瀹為獙榪囪兘涓嶈兘閫夋嫨DOM鍐嶄嬌鐢錛屾瘮濡備含涓滄棤娉曚嬌鐢╭uerySelector銆傝繖閲岀敱浜
浜涓滅殑鍒嗙晫闈㈤兘浣跨敤浜唈Query錛屾墍浠ユ垜浠鍙浠ョ敤jQuery錛屾諱箣浠栦滑寮鍙戣兘鐢ㄧ殑閫夋嫨鍣錛屾垜浠閮藉彲浠ョ敤錛屽惁鍒欏氨涓嶅彲浠ャ

鎺ヤ笅鏉ユ垜浠鐩存帴鏉ョ埇鍙朜ode.js鐨勫畼緗戦栭〉鐒跺悗鐩存帴鐢熸垚PDF

鏃犺烘偍鏄鍚︿簡瑙Node.js鍜宲uppeteer鐨勭埇鉶鐨勪漢鍛橀兘鍙浠ユ搷浣滐紝璇鋒偍涓瀹氫竾鍒嗕粩緇嗛槄璇繪湰鏂囨。騫舵寜欏哄簭鎵ц屾瘡涓姝

鏈欏圭洰瀹炵幇闇奼傦細緇欐垜浠涓涓緗戦〉鍦板潃錛岀埇鍙栦粬鐨勭綉欏靛唴瀹癸紝鐒跺悗杈撳嚭鎴愭垜浠鎯寵佺殑PDF鏍煎紡鏂囨。錛岃鋒敞鎰忥紝鏄楂樿川閲忕殑PDF鏂囨。

絎涓姝ワ紝瀹夎匩ode.js ,鎺ㄨ崘http://nodejs.cn/download/錛孨ode.js鐨勪腑鏂囧畼緗戜笅杞藉瑰簲鐨勬搷浣滅郴緇熷寘

絎浜屾ワ紝鍦ㄤ笅杞藉畨瑁呭畬浜哊ode.js鍚庯紝鍚鍔╳indows鍛戒護琛屽伐鍏(windows涓嬪惎鍔ㄧ郴緇熸悳緔㈠姛鑳斤紝杈撳叆cmd錛屽洖杞︼紝灝卞嚭鏉ヤ簡)

絎涓夋闇瑕佹煡鐪嬬幆澧冨彉閲忔槸鍚﹀凡緇忚嚜鍔ㄩ厤緗,鍦ㄥ懡浠よ屽伐鍏蜂腑杈撳叆 node -v錛屽傛灉鍑虹幇 v10. ***瀛楁碉紝鍒欒存槑鎴愬姛瀹夎匩ode.js

絎鍥涙濡傛灉鎮ㄥ湪絎涓夋ュ彂鐜拌緭鍏node -v榪樻槸娌℃湁鍑虹幇瀵瑰簲鐨勫瓧孌碉紝閭ｄ箞璇鋒偍閲嶅惎鐢佃剳鍗沖彲

絎浜旀鎵撳紑鏈欏圭洰鏂囦歡澶癸紝鎵撳紑鍛戒護琛屽伐鍏鳳紙windows緋葷粺涓鐩存帴鍦ㄦ枃浠剁殑url鍦板潃鏍忚緭鍏cmd灝卞彲浠ユ墦寮浜嗭級錛岃緭鍏 npm i cnpm nodemon -g

絎鍏姝涓嬭澆puppeteer鐖鉶鍖咃紝鍦ㄥ畬鎴愮浜旀ュ悗錛屼嬌鐢╟npm i puppeteer --save 鍛戒護鍗沖彲涓嬭澆

絎涓冩瀹屾垚絎鍏姝ヤ笅杞藉悗錛屾墦寮鏈欏圭洰鐨剈rl.js錛屽皢鎮ㄩ渶瑕佺埇鉶鐖鍙栫殑緗戦〉鍦板潃鏇挎崲涓婂幓(榛樿ゆ槸http://nodejs.cn/)

絎鍏姝鍦ㄥ懡浠よ屼腑杈撳叆 nodemon index.js 鍗沖彲鐖鍙栧瑰簲鐨勫唴瀹癸紝騫朵笖鑷鍔ㄨ緭鍑哄埌褰撳墠鏂囦歡澶逛笅闈㈢殑index.pdf鏂囦歡涓
TIPS: 鏈欏圭洰璁捐℃濇兂灝辨槸涓涓緗戦〉涓涓狿DF鏂囦歡錛屾墍浠ユ瘡嬈＄埇鍙栦竴涓鍗曠嫭欏甸潰鍚庯紝璇鋒妸index.pdf鎷瘋礉鍑哄幓錛岀劧鍚庣戶緇鏇存崲url鍦板潃錛岀戶緇鐖鍙栵紝鐢熸垚鏂扮殑PDF鏂囦歡錛屽綋鐒訛紝鎮ㄤ篃鍙浠ラ氳繃寰鐜緙栬瘧絳夋柟寮忓幓涓嬈℃х埇鍙栧氫釜緗戦〉鐢熸垚澶氫釜PDF鏂囦歡銆

瀵瑰簲鍍忎含涓滈栭〉榪欐牱鐨勫紑鍚浜嗗浘鐗囨噿鍔犺澆鐨勭綉欏碉紝鐖鍙栧埌鐨勯儴鍒嗗唴瀹規槸loading鐘舵佺殑鍐呭癸紝瀵逛簬鏈変竴浜涘弽鐖鉶鏈哄埗鐨勭綉欏碉紝鐖鉶涔熶細鍑虹幇闂棰橈紝浣嗘槸緇濆ぇ澶氭暟緗戠珯閮芥槸鍙浠ョ殑

const puppeteer = require('puppeteer');
const url = require('./url');
(async () => {
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
//閫夋嫨瑕佹墦寮鐨勭綉欏
await page.goto(url, { waitUntil: 'networkidle0' })
//閫夋嫨浣犺佽緭鍑虹殑閭ｄ釜PDF鏂囦歡璺寰勶紝鎶婄埇鍙栧埌鐨勫唴瀹硅緭鍑哄埌PDF涓錛屽繀欏繪槸瀛樺湪鐨凱DF錛屽彲浠ユ槸絀哄唴瀹癸紝濡傛灉涓嶆槸絀虹殑鍐呭筆DF錛岄偅涔堜細瑕嗙洊鍐呭
let pdfFilePath = './index.pdf'
//鏍規嵁浣犵殑閰嶇疆閫夐」錛屾垜浠榪欓噷閫夋嫨A4綰哥殑瑙勬牸杈撳嚭PDF錛屾柟渚挎墦鍗
await page.pdf({
path: pdfFilePath,
format: 'A4',
scale: 1,
printBackground: true,
landscape: false,
displayHeaderFooter: false
});
await browser.close()
})()
鏂囦歡瑙ｆ瀯璁捐

鏁版嵁鍦ㄨ繖涓鏃朵唬闈炲父鐝嶈吹錛屾寜鐓х綉欏電殑璁捐￠昏緫錛岄夊畾鐗瑰畾鐨刪ref鐨勫湴鍧錛屽彲浠ュ厛鐩存帴鑾峰彇瀵瑰簲鐨勮祫婧愶紝涔熷彲浠ラ氳繃鍐嶆′嬌鐢 page.goto鏂規硶榪涘叆錛屽啀璋冪敤 page.evaluate() 澶勭悊閫昏緫錛屾垨鑰呰緭鍑哄瑰簲鐨凱DF鏂囦歡錛屽綋鐒朵篃鍙浠ヤ竴鍙ｆ皵杈撳嚭澶氫釜PDF鏂囦歡~

榪欓噷灝變笉鍋氳繃澶氫粙緇嶄簡錛屾瘯絝 Node.js 鏄鍙浠ヤ笂澶╃殑錛屾垨璁告湭鏉ュ畠鐪熺殑浠涔堥兘鑳藉仛銆傝繖涔堜紭璐ㄧ畝鐭鐨勬暀紼嬶紝璇鋒敹鈃
鎴栬呰漿鍙戠粰鎮ㄧ殑鏈嬪弸錛岃阿璋銆

⑸ 用jquery插件實現pdf文件的在線預覽，大概是怎麼個思路

其實也就是簡單的在瀏覽器中實現一個打開pdf文件，並有類似預覽功能的邊框。

其實在中國上經常見到類似的頁面，在瀏覽器中打開pdf文檔，可大部分都是由於版權的原因使用了一些很特殊的技術，自然很難模仿了。
即使有直接在瀏覽器打開的例子，也必須手動點擊一下鏈接然後才能打開pdf文件。如何直接打開，而不用點擊鏈接呢？
本以為自己對js很熟，也就使用js模擬點擊，可就是不管用，沒辦法，只能在中國上繼續尋找資料。最終想不到代碼卻很簡單。
最主要的是使用到了一個jquery的插件jquery.media.js，使用這個插件就很容易實現了。
核心代碼：
河套西部一次局地大暴雨成因分析使用jquery.media.js就可以直接把一個連接到pdf文件的鏈接打

⑹ jquery代碼是生成橫向pdf

插件描述:jsPDF HTML5是一個客戶端解決方案生成pdf文件。適合活動門票、報告、證書,等等。它將在IE6+,Firefox 3 +,Chrome,Safari 3 +,Opera。IE9下工作

⑺ 解決react項目中PDF的顯示與列印問題

最近項目中有這樣一個需求：

拿到這個需求，真時一頭霧水。因為沒有做過類似需求，不知從何下手。在查閱資料的過程中，發現有很多jQuery插件可以實現顯示pdf, 但是我們是react單頁面應用項目，看來這些插件並不適用，只能另尋其它方法。

後來在 npmjs.com 上找到了 react-pdf-js 組件, 心想顯示pdf有望。就迫不及待將 react-pdf-js 依賴通過 cnpm install react-pdf-js --save-dev 命令安裝到項目中，通過 import PDF from 'react-pdf-js' 引入到項目里。將<PDF file={pdfUrl} onDocumentComplete={this.onDocumentComplete} onPageComplete={this.state.page} />插入render里。

在調試過程中發現靜態pdf文件可以顯示，在線pdf文件不能顯示。通過控制的報錯信息了解道，react-pdf-js組件要求file文件地址是url或者base64格式, 既然url行不通，就只能往base64上靠了。

一開始我直接將將pdf的在線地址url轉換為base64，但是不能顯示。後來想明白了，只把url轉換成base64格式是沒有用的，需要把pdf的文件內容轉換成base64才行。接下來就順理成章，通過從後台獲取到的pdf的url地址，再次請求獲取到pdf文件。

在做這部分的遇到一個小問題：能請求成功，就是獲取不到pdf文件，在這糾結了很久，也不知道該如何解決，把問題描述給我們公司的架構師，我們分析這是跨域問題造成的，他給nginx伺服器的配置解決了跨域問題。

這里需要注意請求pdf文件的時候要設置 responseType 為blob, 為什麼使用blob類型下面解釋，到這我就拿到了pdf文件，將其轉化為base64格式。

base64格式的轉換，需要時blob格式，將轉化為base64格式的pdf，在file={file}, 將其在瀏覽器上顯示出來。實際上最終是以canvas來呈現的PDF。

pdf顯示算是告一段落，接下來就是列印了。

在瀏覽器上，列印分整頁列印和指定部分列印。項目需要列印製定部分內容列印，實現列印的方法多種多樣，我使用了傳統的css控制。通過 @media print 將列印時不需要列印的部分隱藏掉，那麼剩下的就是要列印的部分了。

這里有個調試的小技巧：因為只有當調用了瀏覽器的列印才會調用@media print 里的樣式，所以可以將這部分樣式放在外面，當將不需要列印的部分都隱藏掉了，再將外部的這些樣式去掉，給@media print即可。

調用瀏覽器的列印使用的 window.print() ，雖然不能兼容所有瀏覽器，但是常見的高級瀏覽器都可以兼容，滿足了我們的項目需求，這里我就沒有繼續深挖。

pdf的顯示與列印，前前後後遇到了不少問題，以上流水做個總結。

導航:首頁 > 文檔加密 > jquery基礎pdf

jquery基礎pdf

與jquery基礎pdf相關的資料