pdf.js accès interdomaine à distance + flux de fichiers d'accès
Préface: Avant d'utiliser pdf.js, vous devez d'abord déterminer si vous devez accéder au fichier PDF de ce projet, au fichier PDF distant, au fichier PDF, au flux de fichiers local ou au flux de fichiers PDF distant. Ce que j'utilise ici est le chemin du flux de fichiers distant ( avec ma compréhension actuelle: le chemin du flux de fichiers peut être consulté et téléchargé directement ). Il existe de nombreux didacticiels sur Internet, soit uniquement sur l'accès inter-domaines de pdf.js, soit sur l'accès aux flux de fichiers de pdf.js. Il y aura donc des cas où certaines personnes ne pourront pas y accéder. Juste parce que le mien est le chemin du flux de fichier PDF. Voici un enregistrement de la façon dont j'ai rencontré l'accès interdomaine aux flux de fichiers.
- Télécharger pdf.js site officiel . Il n'y a pas beaucoup d'introduction ici, il existe de nombreuses introductions sur la structure du catalogue sur Internet. Vous pouvez afficher les informations pertinentes.
- Copiez l'intégralité du dossier téléchargé dans le projet (j'utilise le dernier pdfjs-2.5.207-dist ici). Ceci est une page frontale, copiez-la simplement dans un endroit où vous pouvez accéder à la page. Comme indiqué ci-dessous:
- Deux problèmes doivent être traités ici: le cross-domain et l'accès aux flux de fichiers .
Pour les fichiers PDF de ce projet , l'accès est très simple: le code suivant:
<!-- ../js/pdfjs-2.5.207-dist/web/viewer.html是viewer.html的访问路径,file=后面是PDF文件路径。还有其他的访问方式，这里就不多介绍了，网上有很多 -->
<a href='../js/pdfjs-2.5.207-dist/web/viewer.html?file=PDF文件'>点击预览</a>
Pour le traitement de fichiers PDF à distance : vous devez d'abord modifier le contenu de deux fichiers, viewer.html et viewer.js.
- Parlons d' abord du fichier viewer.js . Il existe de nombreux codes de fichier. Il est recommandé d'utiliser la méthode de recherche:
recherchez le code suivant:
function webViewerLoad() {
var config = getViewerConfiguration();
window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
var event = document.createEvent('CustomEvent');
event.initCustomEvent('webviewerloaded', true, true, {
});
document.dispatchEvent(event);
pdfjsWebApp.PDFViewerApplication.run(config);
}
Modifiez le code comme suit. Vous pouvez commenter le code ci-dessus et ajouter le code suivant. Voici ce que j'ai fait:
window.webViewerLoad=function webViewerLoad(fileUrl) {
//调整了此行
var config = getViewerConfiguration();
window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
var event = document.createEvent('CustomEvent');
event.initCustomEvent('webviewerloaded', true, true, {
});
document.dispatchEvent(event);
//调整了if 语句
if(fileUrl){
config.defaultUrl=fileUrl;
}
pdfjsWebApp.PDFViewerApplication.run(config);
}
- Commentez le code suivant, ce code est sous le code ci-dessus:
if (document.readyState === 'interactive' || document.readyState === 'complete') {
webViewerLoad();
} else {
document.addEventListener('DOMContentLoaded', webViewerLoad, true);
}
- Trouvez le code suivant:
run: function run(config) {
this.initialize(config).then(webViewerInitialized);
}
//我的文件中不是这样的，是下面代码，两者是一样的
run(config) {
this.initialize(config).then(webViewerInitialized);
},
Modifiez le code comme suit:
run: function run(config) {
//添加if语句
if(config.defaultUrl){
_app_options.AppOptions.set('defaultUrl',config.defaultUrl)
}
this.initialize(config).then(webViewerInitialized);
},
//我的修改是如下，其实一样
run(config) {
//添加if语句
if(config.defaultUrl){
_app_options.AppOptions.set('defaultUrl',config.defaultUrl)
}
this.initialize(config).then(webViewerInitialized);
},
- Vient ensuite le fichier viewer.html . Avant la modification, le fichier jquery doit être introduit , car la requête ajax est nécessaire pour résoudre le problème interdomaine. Le code ajouté ci-dessous n'a pas besoin d'être modifié et peut être utilisé directement.
<!-- 在<script src="viewer.js"></script>之前引入以下代码，再次强调，需要引入jquery -->
<script type="text/javascript">
$(()=>{
//获取要跨域访问的pdf地址
var url = getUrlParam("urlPath");
console.log(url)
xhrPdf(url,function(href){
//调用viewer.js方法预览pdf
webViewerLoad(href)
})
})
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
//添加xhrPdf函数
function xhrPdf(urlPath,callback) {
$.ajax({
type: "post",
async: false,
mimeType: 'text/plain; charset=x-user-defined',
url: "/WechatApp/manual/pdfStreamHandler", //请求服务器数据 获取pdf数据流,
data:{
urlPath:urlPath
},
success: function(data) {
var rawLength = data.length;
//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));
for (var i = 0;i < rawLength; i++) {
array[i] = data.charCodeAt(i) & 0xff;
}
var href = window.URL.createObjectURL(new Blob([array]));//数据流转换成createObjectURL能解析的Blob类型
callback(href) //返回url
}
});
}
</script>
- Il n'y a pas de vraie solution au problème interdomaine ici, il est résolu par conversion indirecte. Principalement en appelant le mappage back-end, le fichier PDF est converti en flux de fichier PDF pour fonctionner, ce tutoriel en ligne est partout. Mais que faire si le chemin déjà connu est le flux de fichiers PDF? Ici, vous devez créer une demande dans le contrôleur principal, effectuer le traitement correspondant, puis transmettre les données de flux au front-end, afin que le front-end puisse accéder au fichier PDF.
Je le traite comme suit: créer le mappage suivant
@RequestMapping(value = "/pdfStreamHandler")
public void getRemoteFile(String urlPath, HttpServletResponse response) {
InputStream inputStream = null;
try {
try {
String strUrl = urlPath.trim();
URL url = new URL(strUrl);
//打开请求连接
URLConnection connection = url.openConnection();
HttpURLConnection httpURLConnection = (HttpURLConnection) connection;
httpURLConnection.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");
// 取得输入流，并使用Reader读取
inputStream = httpURLConnection.getInputStream();
/**
* 以上的操作处理是处理文件流的，如果访问的是远程PDF文件
* 可以直接new File（"文件路径"），然后传给inputStream,
* 然后以下操作不变。
*/
int bytesum = 0;
int byteread = 0;
byte[] buffer = new byte[1024];
// 清空response
response.reset();
// 设置response的Header
response.addHeader("Content-Disposition", "attachment;filename=" + new String("cbzm.pdf".getBytes()));
OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
response.setContentType("application/octet-stream");
bytesum = 0;
byteread = 0;
buffer = new byte[1024];
while ((byteread = inputStream.read(buffer)) != -1) {
bytesum += byteread;
toClient.write(buffer, 0, byteread);
}
toClient.flush();
inputStream.close();
toClient.close();
} catch (IOException e) {
e.printStackTrace();
inputStream = null;
}
} catch (Exception e) {
e.printStackTrace();
inputStream = null;
}
}
- La méthode d'appel est la suivante:
<!-- 其实和上面的调用没什么区别，知识把file换成了urlPath，如果需要自定义参数名的话，可以修改viewer.html中getUrlParam("urlPath")这个方法的参数，起成自己喜欢的名字 -->
<!-- 因为viewer.html的调用方法很多，我就这这样子举例，如果说想研究的话，可以尝试其他方法是否可以调用 -->
<a href='../js/pdfjs-2.5.207-dist/web/viewer.html?urlPath=PDF路径即可'>点击预览</a>
- Article de référence:
- https://blog.csdn.net/wf001015/article/details/93307643?utm_medium=distribute.pc_relevant.none-task-blog-baidulandingword-2&spm=1001.2101.3001.4242
- https://blog.csdn.net/baby97/article/details/83410628
- https://www.cnblogs.com/best-coder/p/11550409.html