整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
PDF文件現(xiàn)在在許多企業(yè)中常用 - 無論您是要生成銷售報(bào)告，交付合同還是發(fā)送發(fā)票，PDF都是首選的文件類型。PDF.js是由Mozilla編寫的JavaScript庫。由于它使用vanilla JavaScript實(shí)現(xiàn)PDF渲染，因此它具有跨瀏覽器兼容性，并且不需要安裝其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>對象，本文僅介紹PDFJS。
https://mozilla.github.io/pdf.js/
官網(wǎng)提供了下載入口,有穩(wěn)定版和Beta版,我們要在生產(chǎn)環(huán)境下使用建議使用穩(wěn)定版,官網(wǎng)給我們提供了三種獲取PDF.js的方式
我們可以直接使用cdn服務(wù)，也可以將下載的文件引入，我們看一下示例代碼，這里我提供了兩種寫法，在項(xiàng)目運(yùn)行之前，請確保你的同級目錄下有一個(gè)test.pdf文件
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
<script src='./index.js'></script>
<title>PDF</title>
</head>
<body>
<canvas id="pdf"></canvas>
</body>
</html>
//index.js
// var loadingTask = pdfjsLib.getDocument("test.pdf");
// loadingTask.promise.then(
// function(pdf) {
// // 加載第一頁
// pdf.getPage(1).then(function(page) {
// var scale = 1;
// var viewport = page.getViewport(scale);
// //應(yīng)用到頁面的canvas上.
// var canvas = document.getElementById("pdf");
// var context = canvas.getContext("2d");
// canvas.height = viewport.height;
// canvas.width = viewport.width;
// // 渲染canvas.
// var renderContext = {
// canvasContext: context,
// viewport: viewport
// };
// page.render(renderContext).then(function() {
// console.log("Page rendered!");
// });
// });
// },
// function(reason) {
// console.error(reason);
// }
// );
// index.js
(async () => {
const loadingTask = pdfjsLib.getDocument("test.pdf");
const pdf = await loadingTask.promise;
// 加載第一頁.
const page = await pdf.getPage(1);
const scale = 1;
const viewport = page.getViewport(scale);
// 應(yīng)用到頁面的canvas上.
const canvas = document.getElementById("pdf");
const context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
// 渲染canvas.
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext);
})();
當(dāng)我們運(yùn)行項(xiàng)目之后，打開瀏覽器查看，它已經(jīng)將pdf的內(nèi)容渲染到了瀏覽器中，且顯示了第一頁，如下圖所示：
如果就這樣的話遠(yuǎn)遠(yuǎn)是無法滿足我們使用的，因此我們來看一下它比較高級的用法，或者說簡單的用法，高級的功能。
首先我們將我們下載的js包加壓，復(fù)制里面的web文件夾，粘貼到你的項(xiàng)目目錄
然后修改你的index.html代碼，首先注釋掉之前引入的js代碼，然后修改body，如下
<body> <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe> </body>
隨后打開我們的瀏覽器，你會發(fā)現(xiàn)一個(gè)預(yù)覽的窗口
它繼承了我們常用的功能，比如旋轉(zhuǎn)、下載、打印、自適應(yīng)縮放、放大、縮小等，我們只需要使用iframe引入我們的pdf文件即可，其余的全部交給pdf來完成，即可獲得一個(gè)實(shí)現(xiàn)一個(gè)完整的pdf預(yù)覽功能。
PDFJS的這三層分開，讓我們很好的來根據(jù)業(yè)務(wù)需求來實(shí)現(xiàn)我們想要的部分，其簡單的api讓我們得心應(yīng)手，總而言之，PDFJS是一個(gè)絕佳的PDF預(yù)覽解決方案。
PDFJS不僅僅支持pdf的二進(jìn)制文件，同樣還支持base64編碼的pdf，如果在你的項(xiàng)目中需要用到pdf的預(yù)覽等功能，無疑它是一種良好的解決方案，當(dāng)然想要實(shí)現(xiàn)相同的功能有許多辦法，我們可以選擇最適合我們需求的，官方還提供了一個(gè)完整的演示Demo，如下截圖，如果你覺得本文對你有幫助，請麻煩轉(zhuǎn)發(fā)、點(diǎn)贊加關(guān)注吧，后續(xù)會分享更多實(shí)用有趣的技術(shù)！
VSCode中，有許多與HTML相關(guān)的插件可以大大提高開發(fā)效率和便利性。以下是一些值得推薦的插件，它們各自具有獨(dú)特的功能和優(yōu)點(diǎn)，可以幫助您更好地編寫、調(diào)試和預(yù)覽HTML代碼。
1. HTML Snippets: 這個(gè)插件提供了許多HTML代碼片段，可以幫助您快速編寫常見的HTML結(jié)構(gòu)和元素。只需輸入簡短的縮寫，即可自動生成相應(yīng)的HTML代碼，大大提高了編寫速度。
2. Emmet: Emmet是一個(gè)強(qiáng)大的代碼生成器，支持多種編程語言，包括HTML。通過簡單的縮寫和語法，您可以快速生成復(fù)雜的HTML結(jié)構(gòu)和嵌套元素。Emmet還提供了許多自定義選項(xiàng)，可以根據(jù)您的需求進(jìn)行靈活配置。
3. HTML Boilerplate: 這個(gè)插件提供了一個(gè)HTML模板，包含了常見的HTML結(jié)構(gòu)和元素，如文檔類型聲明、字符編碼、頭部信息等。使用這個(gè)插件，您可以快速創(chuàng)建一個(gè)基本的HTML框架，然后在此基礎(chǔ)上進(jìn)行進(jìn)一步的開發(fā)。
4. HTML Preview: HTML Preview插件可以在VSCode中實(shí)時(shí)預(yù)覽HTML代碼的效果。您只需在編輯器中打開HTML文件，然后點(diǎn)擊預(yù)覽按鈕，即可在側(cè)邊欄中查看HTML頁面的渲染效果。這對于調(diào)試和預(yù)覽HTML代碼非常方便。
5. Color Highlight: Color Highlight插件可以自動識別HTML代碼中的顏色值，并在編輯器中高亮顯示。這使得您更容易發(fā)現(xiàn)和修改顏色值，提高了代碼的可讀性和可維護(hù)性。
6. HTML Boilerplate Generator: 這個(gè)插件可以幫助您快速生成HTML5的Boilerplate代碼，包括常用的meta標(biāo)簽、字符編碼、視口設(shè)置等。它還提供了一些自定義選項(xiàng)，可以根據(jù)您的需求生成符合規(guī)范的HTML代碼。
7. HTML CSS Support: 這個(gè)插件提供了對HTML和CSS的完整支持，包括語法高亮、代碼片段、代碼折疊等功能。它還支持自動完成和錯(cuò)誤檢查，可以幫助您更高效地編寫HTML和CSS代碼。
8. HTML/CSS/JS Prettify: 這個(gè)插件可以對HTML、CSS和JavaScript代碼進(jìn)行格式化，使其更加整潔和易讀。您可以自定義格式化規(guī)則，也可以使用默認(rèn)的規(guī)則進(jìn)行快速格式化。這對于保持代碼風(fēng)格一致和提高代碼可讀性非常有幫助。
9. HTML Validator: HTML Validator插件可以對HTML代碼進(jìn)行驗(yàn)證，檢查其是否符合W3C規(guī)范。它可以檢測出潛在的錯(cuò)誤和不符合規(guī)范的地方，并給出相應(yīng)的提示和建議。這對于編寫符合標(biāo)準(zhǔn)的HTML代碼非常有幫助。
10. Live Server: Live Server插件可以在本地啟動一個(gè)實(shí)時(shí)服務(wù)器，讓您在瀏覽器中實(shí)時(shí)預(yù)覽HTML、CSS和JavaScript代碼的效果。它支持自動刷新和熱更新，可以實(shí)時(shí)反映代碼的變化。這對于前端開發(fā)和調(diào)試非常方便。
以上是一些值得推薦的VSCode中與HTML相關(guān)的插件。它們各自具有獨(dú)特的功能和優(yōu)點(diǎn)，可以幫助您提高開發(fā)效率和便利性。當(dāng)然，具體選擇哪些插件還需要根據(jù)您的實(shí)際需求和喜好來決定。希望這些推薦能對您有所幫助！
?
Viewer.js 是一款強(qiáng)大的圖片預(yù)覽查看器，之前在做項(xiàng)目的時(shí)候遇到的是無法給網(wǎng)頁中的圖片添加一個(gè)強(qiáng)大的預(yù)覽功能，而Viewer.js剛好滿足了我的需求。本文就簡單的介紹一下這樣一個(gè)神奇的圖片預(yù)覽插件：
//原生版本
https://github.com/fengyuanchen/viewerjs
//jquery版本
https://github.com/fengyuanchen/jquery-viewer從功能來看，這是一款功能強(qiáng)大的圖片預(yù)覽插件，對于基本的需求大多數(shù)都可以滿足，而且自帶原生版本和jquery版本，方便使用!
現(xiàn)在大多數(shù)情況直接使用npm進(jìn)行安裝，當(dāng)然也可以下載發(fā)不好的js文件進(jìn)行使用
npm install viewerjs<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>new Viewer(element[, options])<div>
<img id="image" src="picture.jpg" alt="Picture">
</div>
<div>
<ul id="images">
<li><img src="picture-1.jpg" alt="Picture 1"></li>
<li><img src="picture-2.jpg" alt="Picture 2"></li>
<li><img src="picture-3.jpg" alt="Picture 3"></li>
</ul>
</div>// import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
// View an image
const viewer = new Viewer(document.getElementById('image'), {
inline: true,
viewed() {
viewer.zoomTo(1);
},
});
// View a list of images
const gallery = new Viewer(document.getElementById('images'));由于排版原因，這里直接放截圖，或者大家可以到Github上查看詳細(xì)的配置
Viewerjs的作者不僅僅是這樣一個(gè)作品，他還有一個(gè)另外的圖片類作品，Web端的圖片裁剪插件，同樣推薦給大家：
https://github.com/fengyuanchen/cropperjs不得不感謝這樣的優(yōu)秀作品的作者提供了如此優(yōu)雅的工具，幾行代碼就可以實(shí)現(xiàn)強(qiáng)悍的圖片預(yù)覽功能，如果有類似需求的朋友千萬不要錯(cuò)過！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
