参考文章 https://www.cnblogs.com/xhy1018/articles/8042107.html
参考文章 https://jingyan.baidu.com/article/3052f5a10fb64e97f31f8683.html
1,文件转成流 fileurl为路径
private static string ReadFromFile(string fileurl) {
FileStream fsForRead = new FileStream(fileurl, FileMode.Open);
string base64Str = "";
try {
//读入一个字节
//Console.Write("文件的第一个字节为:" + fsForRead.ReadByte().ToString());
//Console.ReadLine();
//读写指针移到距开头10个字节处
fsForRead.Seek(0, SeekOrigin.Begin);
byte[] bs = new byte[fsForRead.Length];
int log = Convert.ToInt32(fsForRead.Length);
//从文件中读取10个字节放到数组bs中
fsForRead.Read(bs, 0, log);
base64Str = Convert.ToBase64String(bs);
//Console.Write("base64编码:" + base64Str);
//Console.ReadLine();
} catch (Exception) {
// Console.Write(ex.Message);
//Console.ReadLine();
} finally {
fsForRead.Close();
}
return base64Str;
}
2,base64str接收文件流
string base64str = "data:application/pdf;base64," + ReadFromFile(fileurl);
3,将base64传到前端
ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>DD('"+ base64str + "');</script>");
4,以下是前端代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="pdf.worker.js"></script>
<script type="text/javascript">
var BASE64_MARKER = ';base64,';
function convertDataURIToBinary(dataURI) {
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (var i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
function renderPage(num, canvas) {
// Using promise to fetch the page
pdfDoc.getPage(num).then(function (page) {
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(1.0);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function () {
//这是每次绘制一页内容之后的回调函数
console.log("Page" + num + " rendered");
});
});
}
function renderAll() {
for (var curPage = 1; curPage <= count; curPage++) {
//新建一个<canvas>用于,并将对应页面的内容绘制到这个canvas上
var canvas = document.createElement("canvas");
var div = document.createElement("div");
$(div).attr("id", "page" + curPage);
$(div).attr("class", "page");
$(div).append(canvas);
$("#pdfContainer").append(div);
renderPage(curPage, canvas);
}
}
function DD(basedata) {
var pdfAsDataUri = basedata;
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
PDFJS.getDocument(pdfAsArray).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
count = pdfDoc.numPages;
renderAll();
});
}
</script>
</head>
<body <%--style="overflow: hidden"--%>>
<form id="form1" runat="server">
<div id="pdfContainer"></div>
</form>
</body>
</html>
5,还有一种简单方法,但是只能用谷歌,ie不行
后台:ss.Src = base64str;
前台:<embed id="ss" runat="server" style="width:100%;height:99vh;border:none"/>