言
在Web應用開發中,經常需要實現PDF文件的加載和顯示功能。本文小編將為您介紹如何在ASP.NET Core中實現這一功能,以便用戶可以在Web應用中查看和瀏覽PDF文件。
實現步驟
1)在服務器端創建PDF
//Define Environment variable to access web root folder
private IWebHostEnvironment Environment;
public IndexModel(ILogger<IndexModel> logger, IWebHostEnvironment _environment)
{
_logger=logger;
Environment=_environment;
CreatePDF();
}
public void CreatePDF()
{
const int FontSize=12;
//Define an instance of GcPdfDocument
var doc=new GcPdfDocument();
//Add a new page
var page=doc.Pages.Add();
var g=page.Graphics;
//Initialize TextLayout to render text
var tl=g.CreateTextLayout();
//Add an image to PDF document
var img=Image.FromFile(Path.Combine("Resources", "ImagesBis", "2020-website-gcdocs-headers_tall.png"));
var rc=page.Bounds;
rc.Height *=0.65f;
g.DrawImage(img, rc, null, ImageAlign.StretchImage);
//Define text format settings
var ip=new PointF(48, 72);
var font=Font.FromFile(Path.Combine("Resources", "Fonts", "OpenSans-Regular.ttf"));
var tfCap=new TextFormat() { Font=font, FontSize=FontSize * 1.6f, ForeColor=Color.White };
var tf=new TextFormat() { Font=font, FontSize=FontSize, ForeColor=Color.White };
tl.MaxWidth=72 * 5;
// Add Header:
tl.AppendLine("Fast, Efficient Document APIs for .NET 5 and Java Applications", tfCap);
tl.AppendLine(tfCap);
tl.AppendLine("Take total control of your documents with ultra-fast, low-footprint APIs for enterprise apps.", tf);
tl.AppendLine(tf);
g.DrawTextLayout(tl, ip);
// Add Bullet list:
ip.Y +=tl.ContentHeight;
tl.Clear();
const string bullet="\x2022\x2003";
tl.FirstLineIndent=-g.MeasureString(bullet, tf).Width;
tl.ParagraphSpacing +=4;
tl.Append(bullet, tf);
tl.AppendLine("Generate, load, edit, save XLSX spreadsheets, PDF, Images, and DOCX files using C# .NET, VB.NET, or Java", tf);
tl.Append(bullet, tf);
tl.AppendLine("View, edit, print, fill and submit documents in JavaScript PDF Viewer and PDF Editor.", tf);
tl.Append(bullet, tf);
tl.AppendLine("Compatible on Windows, macOS, and Linux", tf);
tl.Append(bullet, tf);
tl.AppendLine("No dependencies on Excel, Word, or Acrobat", tf);
tl.Append(bullet, tf);
tl.AppendLine("Deploy to a variety of cloud-based services, including Azure, AWS, and AWS Lambda", tf);
tl.Append(bullet, tf);
tl.AppendLine("Product available individually or as a bundle", tf);
//Render text
g.DrawTextLayout(tl, ip);
//Save the document to web root folder
doc.Save(Path.Combine(Environment.WebRootPath, "sample.pdf"));
}
實現效果如下所示(用Adobe打開):
2)加載和查看PDF
在實現步驟1)中,小編實現了如何新建一個PDF的過程,但是新建的PDF需要在Adobe中打開,那么有沒有一種可以直接在瀏覽器中編輯和修改PDF的編輯器呢?答案是肯定的。接下來小編就將繼續為大家介紹一下如何使用JavaScript實現一個加載和修改PDF的編輯器的步驟:
npm install @grapecity/gcpdfviewer
<div id="root" style="height:600px;"></div>
<script src="~/node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.js"></script>
<script>
window.onload=function () {
var viewer=new GcPdfViewer("#root", { /* Specify options here */ }
);
viewer.addDefaultPanels();
viewer.open("sample.pdf");
}
</script>
在第3步實現的PDF編輯器中提供了一個注釋編輯器功能,用于在文檔中添加或刪除不同類型的注釋,例如文本注釋,圓圈注釋,圖章注釋,編輯注釋等。下面的GIF就是一個圓圈注釋的例子:
總結
上文小編總結了如何在服務器端創建 PDF 文件并在客戶端加載和編輯它。
和往常一樣,jsPDF是一個開源的客戶端的PDF解決方案,在之前的文章中已經介紹過幾個Web端和PDF相關的庫,jsPDF同樣是一個不錯的客戶端PDF引 SDK,你可以通過jsPDF在客戶端完成相關操作,它包含了非常豐富的API,幫助你完成一系列的復雜操作!可以說它是相當領先的HTML5客戶端解決方案了!
https://github.com/MrRio/jsPDF
Github star數17k+,可以說相當受歡迎了!
一般情況下我們會考慮使用包管理,常見的就是npm了,因此安裝非常簡單
npm install jspdf --save
或者也可以使用yarn
yarn add jspdf
接下來就是制作你的文件的時候了
默認導出為a4紙張,縱向,使用毫米表示單位
var doc=new jsPDF() doc.text('Hello world!', 10, 10) doc.save('a4.pdf')
如果要更改紙張尺寸,方向或單位,可以執行以下操作:
var doc=new jsPDF({ orientation: 'landscape', unit: 'in', format: [4, 2] }) doc.text('Hello world!', 1, 1) doc.save('two-by-four.pdf')
PDF中的14種標準字體僅限于ASCII代碼頁。如果要使用UTF-8,則必須集成自定義字體,該字體提供所需的字形。jsPDF支持.ttf文件。因此,如果你希望在pdf中使用中文文本,則您的字體必須具有必要的中文字形。因此,請檢查您的字體是否支持所需的字形,否則它將顯示空白而不是文本。
要將字體添加到jsPDF,在/fontconverter/fontconverter.html中使用官網提供的fontconverter。fontconverter將創建一個js文件,其中包含提供的ttf文件的內容作為base64編碼的字符串和jsPDF的附加代碼。你只需將生成的js-File添加到項目中即可。然后,就可以在代碼中使用setFont-method并編寫UTF-8編碼文本。
常規操作
import * as jsPDF from 'jspdf'
有些框架,必須像下面這樣
import jsPDF from 'jspdf';
jsPDF的api非常豐富,在這里就不提供相關地址了,在Github必然找的到,本文重點不在于介紹jsPDF的用法,將部分API截圖展示,通過名稱大致能猜到一些意思,具體用法需要參考官網文檔:
從截圖來看,其文檔特別的詳細,具體到每一個API在js文件的行數,便于閱讀源代碼,包括參數以及返回值都非常明確:
官方提供了一個在線demo,可以直接運行代碼,感興趣的可以先嘗試一下:
jsPDF是筆者見過類似產品中較為突出的,幾乎涵蓋了所有PDF相關操作,非常詳細的文檔也讓開發者,輕松上手,在線demo還能快速學習,如果你的項目對PDF的操作比較多,不妨嘗試下jsPDF,唯一需要注意的就是解決字體問題,但是上文也提到過解決方案,感興趣的可以進行體驗!
PDF文件現在在許多企業中常用 - 無論您是要生成銷售報告,交付合同還是發送發票,PDF都是首選的文件類型。PDF.js是由Mozilla編寫的JavaScript庫。由于它使用vanilla JavaScript實現PDF渲染,因此它具有跨瀏覽器兼容性,并且不需要安裝其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>對象,本文僅介紹PDFJS。
https://mozilla.github.io/pdf.js/
官網提供了下載入口,有穩定版和Beta版,我們要在生產環境下使用建議使用穩定版,官網給我們提供了三種獲取PDF.js的方式
我們可以直接使用cdn服務,也可以將下載的文件引入,我們看一下示例代碼,這里我提供了兩種寫法,在項目運行之前,請確保你的同級目錄下有一個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); // //應用到頁面的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); // 應用到頁面的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); })();
當我們運行項目之后,打開瀏覽器查看,它已經將pdf的內容渲染到了瀏覽器中,且顯示了第一頁,如下圖所示:
如果就這樣的話遠遠是無法滿足我們使用的,因此我們來看一下它比較高級的用法,或者說簡單的用法,高級的功能。
首先我們將我們下載的js包加壓,復制里面的web文件夾,粘貼到你的項目目錄
然后修改你的index.html代碼,首先注釋掉之前引入的js代碼,然后修改body,如下
<body> <iframe src="test.pdf" style="border: none;" width="100%" height='1000px'></iframe> </body>
隨后打開我們的瀏覽器,你會發現一個預覽的窗口
它繼承了我們常用的功能,比如旋轉、下載、打印、自適應縮放、放大、縮小等,我們只需要使用iframe引入我們的pdf文件即可,其余的全部交給pdf來完成,即可獲得一個實現一個完整的pdf預覽功能。
PDFJS的這三層分開,讓我們很好的來根據業務需求來實現我們想要的部分,其簡單的api讓我們得心應手,總而言之,PDFJS是一個絕佳的PDF預覽解決方案。
PDFJS不僅僅支持pdf的二進制文件,同樣還支持base64編碼的pdf,如果在你的項目中需要用到pdf的預覽等功能,無疑它是一種良好的解決方案,當然想要實現相同的功能有許多辦法,我們可以選擇最適合我們需求的,官方還提供了一個完整的演示Demo,如下截圖,如果你覺得本文對你有幫助,請麻煩轉發、點贊加關注吧,后續會分享更多實用有趣的技術!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。