㈠ 如何使用pdf.js播放pdf文件
PDF.js 是基於開放的 HTML5 及 JavaScript 技術實現的開源產品。簡單說就是一個 PDF 解析器。運用HTML5JavaScript（即pdf.js僅使用安全的web語言，不包含任何攻擊者可以用的本地代碼塊）的PDF閱讀器pdf.js，直接在標準的HTML頁面上載入和渲染PDF...
㈡ 前台js 如何使用pdf.js預覽pdf文件流（base64）
將pdf流生成pdf文件，然後在將pdf文件使用PDF.js進行查看。
你需要考慮瀏覽器兼容性，低版本瀏覽器可能沒辦法支持。
參照 File API 和URL API(URL.createObjectURL())
㈢ js怎麼實現將流寫成文件實現pdf在線預覽
Viewer JS預覽pdf文件，其pdf文件只能url地址，不支持獲取文件流到客戶端，生成blob地址預覽。而PDFJS能夠支持
㈣ 怎麼使用js，html5在瀏覽器直接打開pdf文檔
<html>
<body>
<div>
<button id="prev" onclick="goPrevious()">Previous</button>
<button id="next" onclick="goNext()">Next</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<div>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
<!-- Use latest PDF.js build from Github -->
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
//
// NOTE:
// Modifying the URL below to another server will likely *NOT* work. Because of browser
// security restrictions, we have to use a file server with special headers
// (CORS) - most servers don't support cross-origin browser requests.
//
var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';
//
// Disable workers to avoid yet another cross-origin issue (workers need the URL of
// the script to be loaded, and currently do not allow cross-origin scripts)
//
PDFJS.disableWorker = true;
var pdfDoc = null,
pageNum = 1,
scale = 0.8,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
//
// Get page info from document, resize canvas accordingly, and render page
//
function renderPage(num) {
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
});
// Update page counters
document.getElementById('page_num').textContent = pageNum;
document.getElementById('page_count').textContent = pdfDoc.numPages;
}
//
// Go to previous page
//
function goPrevious() {
if (pageNum <= 1)
return;
pageNum--;
renderPage(pageNum);
}
//
// Go to next page
//
function goNext() {
if (pageNum >= pdfDoc.numPages)
return;
pageNum++;
renderPage(pageNum);
}
//
// Asynchronously download PDF as an ArrayBuffer
//
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
pdfDoc = _pdfDoc;
renderPage(pageNum);
});
</script>
</body>
</html>
㈤ 自定義微信分享鏈接(使用JS-SDK) + 實現預覽pdf
可參考：微信JS-SDK說明文檔 >
此時可能出現白名單錯誤（忘截圖了），需要在微信公眾號中設置錯誤中的IP
注意：access_token和ticket都需要緩存
4. 獲取簽名 signature
將以上內容以鍵值對形式拼接，類似如下
本地引入sha1演算法（需網上查找）
將上述拼接的字元串以參數的形式傳遞到sha1中得到 signature
signature = sha1(拼接完的字元串)
驗證 signature 是否正確 >
將appId，nonceStr，timestamp和signature返回給前端
官網上是這樣描述的：
這時候調用 updateAppMessageShareData ， updateTimelineShareData 的時候就可以生效了，具體原理不清楚。。
注意：imgUrl配置有嚴格的要求
尺寸120 x 120，大小不超過10K，不支持GIF格式。必須採用https協議（最好寫完整url）,不支持base64。由於我使用的是vue，在webpack打包時圖片小於10k的是會自動打包成base64導致無法正常顯示余冊圖片，因此在webpack.base.config.js中修改默認配置
由於在網頁中直接查看pdf的路徑是無法在微信中查看（安卓）和分享（ios），因此使用pdf插件進行優化 --- pdf.js 。其原理是繪製成canvas，最終在真機上放大時可能出現模糊的問題悶毀信。
創建之後控制台會報錯出現跨域問題，因為pdf.js不支持跨域訪問。此時可以將錯誤跨域信息在上一步你引入的文件中查找，然後將其判斷語句注釋掉即可解決這個問題。最後會發現pdf出現在這個容器中（忘截圖了），螞輪也實現了微信中預覽和分享的功能。