In the WeChat applet, you can download and open PDF files through the wx.downloadFile and wx.openDocument APIs. This method has many main disadvantages:
1. It needs to be downloaded before it can be viewed, and each time it is opened, it needs to be downloaded to generate a temporary file. If there are many PDF files, there will be more and more temporary files, and if the PDF file is large, the opening will be slower.
2. The title displayed in the navigation bar is a temporary file name, which does not look elegant enough.
3. It is inconvenient to turn pages.
Can the PDF be previewed directly in the mini program? I tried to use the web-view of the WeChat applet to display PDF files. It can be displayed in the development tools, but it cannot be displayed on the real machine. In the WeChat open community, I saw someone using PDF.js to open PDF files in a browser. PDF.js is supported by Mozilla. The goal is to create a universal, web-standard-based platform for parsing and rendering PDF. Through web-view The PDF file parsed by PDF.js cannot be displayed normally in WeChat development tools, but the good news is: it can be displayed normally on a real machine.
The method to use PDF.js to parse PDF is as follows:
1. Go to the PDF.js official website to download this framework: https://mozilla.github.io/pdf.js/getting_started
2. Deploy PDF.js to the website. PDF.js has two folders, web and build. Put these two files in a directory of the website, such as the pdfljs directory. There is a viewer.html file in the web directory. You can Use it to parse PDF files online. Of course, the link to the PDF file needs to be in the same domain name. The preview method is:
https://wwww.domianname.com/pdfjs/web/viewer.html?file=xxx/xxx/xxx.pdf
Then open this link in web-view and you can directly preview the PDF file.
Note that the link to the PDF file in the above method is located in the Mini Program business domain name that needs to be set. Although cross-domain links are also supported, they require special handling. For details, please see the link: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-xhr
Use PDF.js to preview PDF files in the WeChat applet, which supports PDF.js-related functions, such as: sidebar, search, paging, zoom, add text, drawing, rotation, presentation mode, etc.
The above is to display PDF files through the official viewer.html. It can also be parsed and displayed by introducing PDF.js. In this way, the functions can be customized. Methods as below:
1. Introduce pdf.js library
<script src="./build/pdf.js"></script>
<script src="./build//pdf.worker.js"></script>
2. Use canvas to receive the PDF content that needs to be read and display it.
<canvas id="myCanvas"></canvas>
3. Create a PDF object: data can be the Base64 string corresponding to the PDF file, or it can be the relative or absolute path to the file, or it can be an online file URL address.
var loadingTask = pdfjsLib.getDocument(data)
loadingTask.promise.then(function (pdf) {
for (var i = 1; i <= pdf.numPages; i++) {
pdf.getPage(1).then(function (page) {
var scale = 2
var viewport = page.getViewport({ scale: scale })
var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
var renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext);
})
}
});
For more information about PDF.js, you can refer to the official website: https://mozilla.github.io/pdf.js/
Everyone is welcome to experience it, make suggestions, and work together to make the CRMEB open source mall system more powerful and benefit more developers! Although it is open source, it has all the functions we should have! Group buying, flash sales, coupons, lottery, points, live broadcast, distribution, page DIY... Common mall system functions are all open source and can be used directly!