pdf实现在线预览

最新推荐文章于 2024-01-26 10:10:15 发布

j_xx4409

最新推荐文章于 2024-01-26 10:10:15 发布

阅读量521

点赞数

分类专栏： html JavaScript jquery

本文链接：https://blog.csdn.net/j_xx4409/article/details/103079530

版权

html 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

1.直接pdf打开
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalable=yes" />
	<title>查看云合同</title>
	<style type="text/css">
	canvas {
	  width: 100%;
	  height: 100%;
	  border: 1px solid black;
	}
	</style>
	<script src="/static/v1.1/js/pdf/pdf.js"></script>
	<script type="text/javascript">

	//创建 canavs
	function createPage() {
	  var div = document.createElement("canvas");
	  document.body.appendChild(div);
	  return div;
	}

	function renderPage(num,pdf) {
	  pdf.getPage(num).then(function(page) {
	    var viewport = page.getViewport(5.0);
	    var canvas = createPage();
	    var ctx = canvas.getContext('2d');

	    canvas.height = viewport.height;
	    canvas.width = viewport.width;

	    page.render({
	      canvasContext: ctx,
	      viewport: viewport
	    });
	  });
	}

	var pdfDoc = null;

	//获取 PDF URL
	// var url = location.search.substring(1);
	var url = "{$contract_url}";
	//var pdfData  = atob(url);
	// var url = window.location.origin+'/static/v1.1/js/pdf/1911141539053686.pdf';
	// If absolute URL from the remote server is provided, configure the CORS
	// header on that server.
	// Loaded via <script> tag, create shortcut to access PDF.js exports.
	var pdfjsLib = window['pdfjs-dist/build/pdf'];
	// The workerSrc property shall be specified.
	pdfjsLib.GlobalWorkerOptions.workerSrc = window.location.origin+'/static/v1.1/js/pdf/pdf.worker.js';

	// Asynchronous download of PDF
	var loadingTask = pdfjsLib.getDocument(url);
	//var loadingTask = pdfjsLib.getDocument({data:pdfData});

	loadingTask.promise.then(function(pdf) {

	// console.log('PDF loaded');
	pdfDoc = pdf;
	for (var i = 1; i <= pdfDoc.numPages; i++) {
	  renderPage(i,pdf)
	}

	  // Fetch the first page

	  // var pageNumber = 1;
	  // pdf.getPage(pageNumber).then(function(page) {
	  //   console.log('Page loaded');
	  //
	  //   var scale = 1.5;
	  //   var viewport = page.getViewport(2.0);
	  //
	  //   // Prepare canvas using PDF page dimensions
	  //   var canvas = createPage();
	  //   var context = canvas.getContext('2d');
	  //   canvas.height = viewport.height;
	  //   canvas.width = viewport.width;
	  //
	  //   // Render PDF page into canvas context
	  //   var renderContext = {
	  //     canvasContext: context,
	  //     viewport: viewport
	  //   };
	  //   var renderTask = page.render(renderContext);




	}, function(reason) {
	  // PDF loading error
	  // console.error(reason);
	});
	</script>
</body>
</html>

2.把pdf转化为base64打开
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalable=yes" />
	<title>查看云合同</title>
	<style type="text/css">
	canvas {
	  width: 100%;
	  height: 100%;
	  border: 1px solid black;
	}
	</style>
	<script src="/static/v1.1/js/pdf/pdf.js"></script>
	<script type="text/javascript">

	//创建 canavs
	function createPage() {
	  var div = document.createElement("canvas");
	  document.body.appendChild(div);
	  return div;
	}

	function renderPage(num,pdf) {
	  pdf.getPage(num).then(function(page) {
	    var viewport = page.getViewport(5.0);
	    var canvas = createPage();
	    var ctx = canvas.getContext('2d');

	    canvas.height = viewport.height;
	    canvas.width = viewport.width;

	    page.render({
	      canvasContext: ctx,
	      viewport: viewport
	    });
	  });
	}

	var pdfDoc = null;

	//获取 PDF URL
	// var url = location.search.substring(1);
	var url = "{$contract_url}";
	var pdfData  = atob(url);
	// var url = window.location.origin+'/static/v1.1/js/pdf/1911141539053686.pdf';
	// If absolute URL from the remote server is provided, configure the CORS
	// header on that server.
	// Loaded via <script> tag, create shortcut to access PDF.js exports.
	var pdfjsLib = window['pdfjs-dist/build/pdf'];
	// The workerSrc property shall be specified.
	pdfjsLib.GlobalWorkerOptions.workerSrc = window.location.origin+'/static/v1.1/js/pdf/pdf.worker.js';

	// Asynchronous download of PDF
	// var loadingTask = pdfjsLib.getDocument(url);
	var loadingTask = pdfjsLib.getDocument({data:pdfData});

	loadingTask.promise.then(function(pdf) {

	// console.log('PDF loaded');
	pdfDoc = pdf;
	for (var i = 1; i <= pdfDoc.numPages; i++) {
	  renderPage(i,pdf)
	}

	  // Fetch the first page

	  // var pageNumber = 1;
	  // pdf.getPage(pageNumber).then(function(page) {
	  //   console.log('Page loaded');
	  //
	  //   var scale = 1.5;
	  //   var viewport = page.getViewport(2.0);
	  //
	  //   // Prepare canvas using PDF page dimensions
	  //   var canvas = createPage();
	  //   var context = canvas.getContext('2d');
	  //   canvas.height = viewport.height;
	  //   canvas.width = viewport.width;
	  //
	  //   // Render PDF page into canvas context
	  //   var renderContext = {
	  //     canvasContext: context,
	  //     viewport: viewport
	  //   };
	  //   var renderTask = page.render(renderContext);




	}, function(reason) {
	  // PDF loading error
	  // console.error(reason);
	});
	</script>
</body>
</html>
查看官网
http://mozilla.github.io/pdf.js/examples/

j_xx4409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pdf实现在线预览

1.直接pdf打开<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=4.0,user-scalab...
复制链接

扫一扫