1,由于是net core的项目,提交的文件有图片,也有PDF文件,由于做了统一处理,都转成了base64,那么图片很好处理,那么PDF文件呢?
2,最开始想的是把PDF文件转成图片,然后再转为base64,好像这个思路也没毛病,解决问题优先嘛,找了资料发现啊,net core中插件不多,而且环境问题处理麻烦,这个还可能造成后面发布出问题,果断放弃!
3,那么后端不处理,看前端有没办法处理,那么就是把PDF文件的base64转一下,然后呈现出来,找下资料发现有个PDF.js的插件,好家伙,后面也整出来了,可是我不满意,太麻烦!
4,完成了,但是我不满意,个人喜欢简单粗暴,所以在想,图片可以直接显示base64,标签声明是图片的base64就可以了,那么改下声明呗,试了下,果然不行,找了很久发现换个标签就行了,使用iframe就可以,丢,搞了半天被一个iframe搞定了!简单粗暴
以下是代码,测试用的后端代码
private readonly ILogger<HomeController> _logger;
private readonly IMessage _iMessage;
private readonly IHostingEnvironment _hostingEnvironment;
public HomeController(ILogger<HomeController> logger, IMessage message, IHostingEnvironment hostingEnvironment)
{
_logger = logger;
_iMessage = message;
_hostingEnvironment = hostingEnvironment;
}
public IActionResult Index()
{
ViewBag.mess = _iMessage.Send();
ViewData["asd"] = _iMessage.Send();
_logger.LogInformation("启动首页");
string webRootPath = _hostingEnvironment.WebRootPath;
ViewBag.BaseStrData = getBase64str(webRootPath + @"\js\go.jpg");
var paf64 = getBase64str(webRootPath + @"\js\111.pdf");
ViewBag.BaseStrData2 = paf64 + "#"; //区分pdfbase64
List<string> baseStrData = new List<string>();
baseStrData.Add(ViewBag.BaseStrData);
baseStrData.Add(ViewBag.BaseStrData2);
ViewBag.BaseStrData3 = baseStrData;
return View();
}
string getBase64str(string filePath)
{
FileInfo file = new FileInfo(filePath);
//图片处理
var stream = file.OpenRead();
byte[] buffer = new byte[file.Length];
//读取图片字节流
stream.Read(buffer, 0, Convert.ToInt32(file.Length));
//将字节流转化成base64字符串
var baseStr = Convert.ToBase64String(buffer);
return baseStr;
}
前端代码
重点代码:
@{
ViewData["Title"] = "Home Page";
var data = ViewBag.BaseStrData3 as List<string>;
}
<table>
<tr>
@foreach (var item in data)
{
if (item.Contains("#"))
{
<td>
<iframe height="300" src="data:application/pdf;base64,@item.Split('#')[0].ToString()">
</iframe>
</td>
}
else
{
<td>
<img id="img" height="300" src="https://img-blog.csdnimg.cn/2022010709342232709.png" class="image_click" />
</td>
}
}
</tr>
</table>
效果如下
一张图片,一个PDF显示,PDF上还带有些功能(下载,打印等)挺不错,样式效果啥的,自己慢慢去优化,就可以了 !