整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
近新項目需要處理 PDF，研究了 PDf.js 之后覺得很不錯，于是寫篇文章推薦給大家。
PDF.js 的功能和它的名字一樣簡單，是一個使用 HTML5 技術(shù)來讓前端網(wǎng)頁支持讀取、解析和顯示 PDF 文檔的 JS 工具庫。這個項目由大名鼎鼎的 Mozilla 組織開發(fā)并且更新維護(hù)著，沒錯，就是那個開發(fā)了火狐瀏覽器的 Mozilla。所以 pdf.js 也內(nèi)置在 Firefox 的 19+ 版本中，也是火狐瀏覽器的默認(rèn) PDF 處理工具。
一般來說，要查看 PDF 文檔，我們需要一個 PDF 閱讀器軟件，而通過 PDF.js 可以在瀏覽器中直接顯示和處理 PDF 文檔，無論是在線瀏覽、存檔或者其他基于 PDF 的功能都可以實現(xiàn)。
PDF.js 項目主頁
如果只是為什么顯示 PDF 文檔，其實大部分情況下瀏覽器都支持直接打開 PDF，之前碰到要顯示 PDF 的需求，都是直接在瀏覽器新標(biāo)簽打開。
在瀏覽器中渲染 PDF
不過就在上周，我接到了一個需求，要在網(wǎng)頁上支持導(dǎo)入 PDF 文件，轉(zhuǎn)化成圖片保存到后端，并且還要提取 PDF 文檔中的文字。于是我就開始研究 PDF.js ，了解之后發(fā)現(xiàn)這個工具庫非常強(qiáng)大，完全可以滿足我的需求，那些在線轉(zhuǎn)換 PDF 的工具實際上都是基于 PDF.js 開發(fā)的。
我要處理的文檔有一部分是發(fā)票，其實里面的文字并不是圖片，而是可以選擇的，這種類型的文檔通過 PDF.js 甚至可以直接獲取文字的內(nèi)容，OCR 識別的過程都免了，實在太棒了。
要開始使用 PDF.js ，可以直接從項目下載源碼，然后在頁面中引入 pdf.js ，就可以按照代碼例子那些來使用了。
官方文檔
我是在 Vue 項目中使用，所以我選擇用 npm 安裝的方式：
npm i pdfjs-dist -S然后在 Vue 頁面中引入 PDF.js，注意這里的引入方式，需要在包名后加上 /webpack ，否則會報錯，原因我也沒有去深入排查。
<template>
<div class="hello">
<input
type="file"
name="file"
id="file"
accept="application/pdf"
single
placeholder="請選擇pdf文件"
@change="handleFile"
/>
<canvas id="viewer" ref="viewer" :width="width" :height="height"></canvas>
</div>
</template>
<script>
import { getDocument } from "pdfjs-dist/webpack"; // 注意這里的引入方式
// 省略無關(guān)代碼...
// methods:
handleFile(e) {
const reader=new FileReader();
reader.onload=(evt)=> {
this.init(evt.target.result);
};
reader.readAsDataURL(e.target.files[0]);
},
async init(path) {
// 讀取pdf
let pdf=await getDocument(path).promise; //返回一個pdf對象
const page=await pdf.getPage(0); // 獲取第一頁
const viewport=page.getViewport({ scale: 1 });
const textContent=await page.getTextContent();
console.log(textContent.items); // 頁面的文章內(nèi)容在這
const context=this.canvas.getContext("2d");
// 設(shè)置canvas的尺寸
this.width=viewport.width;
this.height=viewport.height;
await page.render({ canvasContext: context, viewport: viewport }).promise; // 渲染第一頁內(nèi)容
},
</script>上面這段代碼就是我項目 demo 中的一部分，可以實現(xiàn)讀取 PDF 文檔中的頁面和文字，代碼的末尾把第一頁渲染到了 canvas 中，想要轉(zhuǎn)成圖片，只要把 canvas 中的內(nèi)容轉(zhuǎn)成 PNG 圖片即可，區(qū)區(qū)十來行代碼，非常簡單。
除了提取文章和轉(zhuǎn)成圖片，PDF.js 還很多強(qiáng)大的功能，比如可以實現(xiàn)頁面導(dǎo)航，預(yù)覽時加入縮放、滾動、旋轉(zhuǎn)和手寫等注釋以及實現(xiàn)打印、另存為等操作。
還有些付費軟件的功能是壓縮 PDF 文檔，PDF.js 也可以壓縮處理超大型的 PDF 文檔，技術(shù)原理是把文檔中沒有使用的結(jié)構(gòu)、元素和對象刪除，大大簡化文檔，從而起到壓縮的效果。
總之，想要在項目處理 PDF，PDF.js 是首選，并且目前沒有看到類似好用并且強(qiáng)大的 JS 庫，反而很多 PDF 工具都是基于 PDF.js 二次封裝的。
Mozilla 組織本身是一個非營利性組織，成立以來一直致力于推動瀏覽器的良好發(fā)展，PDF.js 也不例外，是一個免費開源的項目，源碼基于 Apache 2.0 許可托管在 Github 上，任何人都可以免費下載來使用，用在商業(yè)項目也完全沒問題。
↓↓點擊查看本次分享的網(wǎng)站。
PDF.js - 免費開源的 JavaScript 讀取、顯示 PDF 文檔的工具庫，由 Mozilla 開發(fā)并且持續(xù)維護(hù)｜那些免費的磚
微信小程序小說閱讀器+后臺管理系統(tǒng)|前后分離VUE》該項目含有源碼、論文等資料、配套開發(fā)軟件、軟件安裝教程、項目發(fā)布教程等
本系統(tǒng)包含微信小程序前臺和Java做的后臺管理系統(tǒng)，該后臺采用前后臺前后分離的形式使用Java+VUE
微信小程序——前臺涉及技術(shù)：WXML 和 WXSS、JavaScript、uniapp
Java——后臺涉及技術(shù)：
前端使用技術(shù)：JSP,HTML5,CSS3、JavaScript、VUE等
后端使用技術(shù)：Spring、SpringMvc、Mybatis（SSM）等
數(shù)據(jù)庫：Mysql數(shù)據(jù)庫
小程序框架：uniapp
小程序開發(fā)軟件：HBuilder X
小程序運(yùn)行軟件：微信開發(fā)者
管理員：個人中心、用戶管理、圖書分類管理、圖書信息管理、留言板管理、系統(tǒng)管理等
普通用戶：登錄注冊、首頁、圖書信息和我的（留言板、收藏）等
系統(tǒng)功能完整，適合作為畢業(yè)設(shè)計、課程設(shè)計、數(shù)據(jù)庫大作業(yè)。
下面是資料信息截圖：
下面是系統(tǒng)運(yùn)行起來后的一些截圖：
1月19日下午，搜狐IT無窮沙龍聚集了一批對HTML5技術(shù)感興趣的人，這些人大多是各公司的技術(shù)達(dá)人或者HTML5技術(shù)愛好者，他們都對HTML5的應(yīng)用及未來發(fā)展都非常有想法，希望能夠在這個沙龍上聽到業(yè)界重量級人物的精彩分享，本片文章就帶你看看他們是如何看待HTML5生態(tài)發(fā)展的。
當(dāng)前HTML5的技術(shù)應(yīng)用非常廣泛，從網(wǎng)站到平臺再到應(yīng)用，不但能無縫連接了PC網(wǎng)站與移動互聯(lián)網(wǎng)，更讓很多傳統(tǒng)的PC網(wǎng)站起死回生。微信朋友圈的營銷以及各種活動宣傳都開始以HTML5的形式，使得的互動性與娛樂性大為提高。
HTML5是在HTML大標(biāo)準(zhǔn)下的再生，HTML5整個版本經(jīng)歷很的時間，從04年開始進(jìn)行草稿定式到06年W3C加入到整個標(biāo)準(zhǔn)的制作過程中，到08年提出第一稿，到14年正式定稿，對于整個生態(tài)的影響是什么?沙龍上，包括搜狐快站負(fù)責(zé)人樊功臣、百度直達(dá)號技術(shù)團(tuán)隊負(fù)責(zé)人甘勛、微信海CEO程小永、UC瀏覽器內(nèi)核研發(fā)團(tuán)隊負(fù)責(zé)人梁延俊、HTML5民間開發(fā)者張東在內(nèi)的嘉賓進(jìn)行了分享，同時討論整個未來移動互聯(lián)網(wǎng)的未來圍繞著HTML5將會進(jìn)行什么樣的變革，偉哥認(rèn)為這些話題對于廣大互聯(lián)網(wǎng)人來說非常有價值。
搜狐快站負(fù)責(zé)人樊功臣：HTML5全力打造搜狐快站 六大神技讓移動建站更加簡單
這次老樊的分享是搜狐快站的六大神技，分別是免費篇之上善若水、獨立篇之股本培元、功能篇之寶刀屠龍、便捷篇之彈指神功、HTML5篇之無孔不入、營銷篇之吸星大法。這六大神功步步為營，環(huán)環(huán)相扣，重點在于上無孔不入這技能，搭載了HTML5的快站可以用無孔不入來形容，從蘋果系統(tǒng)到安卓系統(tǒng)，可以在微信、微博及各搜索引擎上使用，甚至可以在谷歌眼鏡及蘋果眼鏡上使用。
搜狐快站在健康類、教育類及汽車類的合作商家有七八萬家站，快站使用HTML5技術(shù)搭建的APP網(wǎng)站，簡潔同時功能也在不斷完善，后臺的驅(qū)動力量也非常大，同時跟各平臺的融合性也在不斷提高，快站技術(shù)體現(xiàn)在新聞客戶端中的HTML5的比重也在增大。目前快已經(jīng)跟微信公眾號打通，跟直達(dá)號做了深度合作，跟360包括周圍各種各樣的流量渠道進(jìn)行打通，區(qū)別于依附在百度或者騰訊上面的一個營銷站點，快站搭建的站是一個完整的獨立站點。
百度直達(dá)號技術(shù)團(tuán)隊負(fù)責(zé)人甘勛：HTML5實現(xiàn)跨平臺服務(wù)商家
百度在多年以前就開始研究與布局移動端包括HTML5以及CSS，去年在百度世界的發(fā)不的輕應(yīng)用也使用HTML5技術(shù)，用戶在百度首頁點擊某個鏈接，就會進(jìn)入到HTML5的應(yīng)用或者WEB站，用戶在獲取信息的同時也能直接獲取到服務(wù)。
能夠以跨平臺的方式直接連接服務(wù)和商家，HTML5是最優(yōu)化的解決方式。通過搜索入口直接讓用戶連接到應(yīng)用本身，這就解決了現(xiàn)在的大部分移動應(yīng)用及一些站點分發(fā)需要中轉(zhuǎn)才能使用的問題，把這一件事情直接通過搜索關(guān)聯(lián)起來，分發(fā)等各種應(yīng)用都不再是問題。
所有的應(yīng)用得需要讓更多的人使用你的服務(wù)或者使用你的應(yīng)用，從搜索百度做搜索是流量的入口。商家的價值有四類，即廣拉新、高轉(zhuǎn)化、強(qiáng)留存、易開通。直達(dá)號是企業(yè)在百度官方移動平臺的官方服務(wù)號，直接關(guān)聯(lián)商家的應(yīng)用，直接使用戶關(guān)聯(lián)到企業(yè)。百度給是流量的入口，現(xiàn)在在移動端有15款用戶過億，包括地圖、文庫、魔圖等等移動端應(yīng)用，把直達(dá)號和15款過億的APP結(jié)合起來，這些移動端就成為連接HTML5應(yīng)用的入口。
微信海CEO程小永：要多做一些接地氣的HTML5應(yīng)用
從UC、微信、百度直達(dá)號，大家開始做這件事情的時候個HTML5開始越來越火。小永希望做一些能從商用層面真正給傳統(tǒng)企業(yè)帶來效果的，所以我們用HTML5做更多的營銷活動，通過微信口碑傳出去。所以，HTML5興起以后，更多的企業(yè)都在琢磨去中性化的玩法。
HTML5對于移動端來說是一個技術(shù)的革新，把APP之間互相不通的情況有意識打破，但是這個過程還是很慢。移動互聯(lián)網(wǎng)是連接線上和線下的而不是虛擬的連接，HTML5在做虛擬的連接，像PC時代的WWW.COM，移動端通過二維碼把線線下連接起來，這也是O2O為什么火的原因，因為線上線下實現(xiàn)了閉環(huán)。
大家以后做HTML5應(yīng)用，一定要更多做一些接地氣的，真正能讓商家讓傳統(tǒng)企業(yè)能讓使用者很好把它用起來的東西，不要做得特別炫。中國四千萬中小企業(yè)不需要很炫的東西，要帶來廣泛的傳播廣泛的定單，這是他們所有的需求。
UC瀏覽器內(nèi)核研發(fā)團(tuán)隊負(fù)責(zé)人梁延俊：HTML5混合原生態(tài)的模式成為主流
在很多APP開發(fā)都是HTML5混合原生開發(fā)來去做一些應(yīng)用，各取所長，通過實際需要取得一個平衡點。這樣的一個模式其實是HTML5與游戲開發(fā)者層面的影響，更有利地去做一些發(fā)展。
現(xiàn)在HTML5混合原生態(tài)的模式后已經(jīng)是一個主流，以后也會有更多的探索用這樣的方式開發(fā)里面的應(yīng)用，包括小說、視頻、閱讀器等。像小說翻頁的時候?qū)τ谛阅艿囊蟊容^高，小說的搜索、書架可能更追求的是需要內(nèi)容快速更新，在以后這部分可能會用HTML5的頁面來去做。
HTML5民間開發(fā)者張東：HTML5技術(shù)滿足企業(yè)們更高的需求
2013—2014年隨著手機(jī)移動端的爆棚式增長，企業(yè)們的服務(wù)需求也在改變，現(xiàn)在為止隨著HTML5技術(shù)的成熟，有很多優(yōu)秀的建站產(chǎn)品的問世。在這個過程中，我們首先要了解用戶在空閑的時候會拿手機(jī)干什么，每個年齡段有什么樣的需求，這個也是我們需要分析的話題，老用戶和新用戶的區(qū)別。對于一個商戶的開發(fā)來說首先是一個用戶體驗，這是最重要的一點，用戶體驗抓住用戶的需求，讓用戶在極短的時間內(nèi)完成他所需要做的一些事情，這個是最關(guān)鍵的。
有特色的服務(wù)包括開發(fā)的指導(dǎo)，有一些比較流行的，在沒有強(qiáng)大的技術(shù)的情況下，你照樣可以去做建站服務(wù)以及互聯(lián)網(wǎng)這方面的服務(wù)，這些通過搜狐快站等產(chǎn)品就可以完成，基本上，哪家產(chǎn)品能夠提供更多的便利，提供的指導(dǎo)更多，能節(jié)省成本，有穩(wěn)定的服務(wù)與網(wǎng)絡(luò)支持，就會選擇哪家產(chǎn)品。搜狐快站這樣的建站產(chǎn)品，通過一個簡單的推動就可以實現(xiàn)某個功能、一些交互式及某些特殊的效果，并且有完善的CMS內(nèi)容發(fā)布管理系統(tǒng)以及電商系統(tǒng)等等，在這個情況下可以看到快站針對互聯(lián)網(wǎng)全網(wǎng)營銷在這方面考慮的比較多。
HTML5越發(fā)火熱，相信在接下來的發(fā)展中會得到更廣泛的應(yīng)用，從SEO抓取到平臺再到應(yīng)用的整條產(chǎn)業(yè)鏈等會誕生出千萬甚至億級的企業(yè)，使得HTML5在創(chuàng)業(yè)圈與投資圈非常熱，以此關(guān)注HTML5的人越來越多。
這次無窮俱樂部沙龍的各位嘉賓從建站產(chǎn)品、開發(fā)者、使用者、應(yīng)用程序等各方面分享自己的對HTML5的認(rèn)識，多角度為到場聽眾見解了HTML5在未來的發(fā)展，分享內(nèi)容無論是專業(yè)度還是實用度，都是很少見的。偉哥認(rèn)為HTML5未來會有更廣泛的發(fā)展，將改變未來移動互聯(lián)網(wǎng)時代的視聽新體驗，同時也是一個非常重要的發(fā)展方向，無論是WebAPP還是輕應(yīng)用或者是輕游戲方面。在超級APP的崛起之下，HTML5的發(fā)展未來前景一篇廣闊，現(xiàn)在是廣大建站者必需真正需要考慮用HTML5的時候了。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
