Office檔案線上預覽是目前線上辦公必不可少的一項需求，一般情況都是需要後端去完成的。那麼我作為前端工程師的我們如何解決這一問題呢？
第一步，擷取準備預覽位址
- 此處使用的usdoc的線上預覽模式，使用方法以及開發文檔可以參考
http://usdoc.cn/show
前置預覽位址： http://vw.usdoc.cn/?src=
這個位址src後面緊跟檔案位址
例如：http://vw.usdoc.cn/?src=檔案位址
注意：此處的檔案位址必須為網絡檔案位址。
如：http://vw.usdoc.cn/?w=5&src=https://zh.usdoc.cn/view/三好學生申請書.wps
=注意=
src後面的檔案位址建議編碼一下，如果路徑中含有中文在某些浏覽器可能會無法擷取單檔案解析。
代碼如下：
<!DOCTYPE html>
<html lang="zh">
<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">
<title></title>
<style type="text/css">
#app>input {
width: 300px;
height: 30px;
border-radius: 3px;
border-style: none;
border: 1px solid #bababa;
}
#app>button {
padding: 10px 30px;
border: 1px solid #bababa;
background-color: #FFF;
border-radius: 3px;
}
iframe {
border-style: none;
border: 1px solid #d8d8d8;
}
</style>
</head>
<body>
<div id="app">
<span>檔案位址：</span>
<input name="fileSrc" type="text" />
<button id="view">預覽</button>
</div>
<iframe src=""
width="800" height="650">
</iframe>
</body>
</html>
<script src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
var preSrc = "http://61office.com/?w=5&src=";
/**
*點選開始預覽
*/
//http://61office.com/?w=5&src=https:/zh.usdoc.cn/view/%E4%B8%89%E5%A5%BD%E5%AD%A6%E7%94%9F%E7%94%B3%E8%AF%B7%E4%B9%A6.wps
$("#view").click(() => {
let url = $("input[name='fileSrc']").val();
if (url.trim()=="") {
//沒有擷取到檔案位址
}
//檔案位址url解碼一次，防止中文出錯
url = decodeURIComponent(url);
$($("iframe")[0]).attr("src",preSrc+url)
})
</script> ![如何利用Python實作Office線上預覽[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)