demand:
HTML part:
<!--条款-->
<div ng-show="step == 5" style="background:#f6f5f5; height: 100%; width: 100%;">
<div class="weui-panel weui-panel_access cpxq-head-color">
<div style="margin:10px auto;width:40%;text-align: center;">条款须知</div>
<!-- 太平盛世颐享人生年金保险(2018) -->
<div>
<div style="height:44px;line-height:44px;background-color: #DFF2FF;">
<div style="float: left;">
<img src="./img/annuity/huakuai.png" alt="" style="width: 6px;">
</div>
<div style = "margin-left: 5%; color: # 28A5FF;"> Taiping Shengshi Yixiang Life Annuity Insurance (2018) </ div>
</ div>
<div ng-repeat="obj in statements track by $index">
<div class="cpxq-panel__hd">
<div class="zdyl-tab-right" style="margin-left: 0;" ng-click="changeShowContent($index,0)">
<i style="font-size: 16px">{{obj.label}}</i>
<img ng-show="!obj.showContent" class="cpxq-arrows" src="./img/down-grey.png">
<img ng-show="obj.showContent" class="cpxq-arrows" src="./img/up-grey.png">
</div>
</div>
<div ng-if="$index == 0 && obj.showContent" style="height:400px;padding:5px 14px;">
<div style="height:100%;" ng-if="showPdfFlagTF">
<div id="pdf-containerTF"
style="width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 0 10px #3268d2; background: #ffffff;padding: 10px;">
<ion-scroll delegate-handle="pdfScroll" zooming="true" direction="xy"
style="width: 100%; height: 100%;" scrollbar-y="false" scrollbar-x="false"
min-zoom="1">
<div id="pdf-popTF"
style="width: 100%; height: 100%;border-radius: 10px; background: #ffffff;margin: 0px;position: absolute;padding: 0px;">
</div>
</ ion-scroll>
</div>
</ div>
</ div>
</ div>
</ div>
<!-Taiping Shengshi Yixiang Life Annuity Insurance (Universal)->
<div style = "clear: both;" >
<div style = "height: 44px; line-height: 44px; background-color: # DFF2FF;">
<div style = "float: left;">
<img src = "./ img / annuity / huakuai.png "alt =" "style =" width: 6px; ">
</ div>
<div style =" margin-left: 5%; color: # 28A5FF; "> Taiping Shengshi Yixiang Life Annuity Insurance (Universal Type) </ div>
</div>
<div ng-repeat="obj in statements1 track by $index">
<div class="cpxq-panel__hd">
<div class="zdyl-tab-right" style="margin-left: 0;" ng-click="changeShowContent($index,1)">
<i style="font-size: 16px">{{obj.label}}</i>
<img ng-show="!obj.showContent" class="cpxq-arrows" src="./img/down-grey.png">
<img ng-show="obj.showContent" class="cpxq-arrows" src="./img/up-grey.png">
</div>
</div>
<div ng-if="$index == 0 && obj.showContent" style="height:400px;padding:5px 14px;">
<div style="height:100%;" ng-if="showPdfFlagTF1">
<div id="pdf-containerTF"
style="width: 100%; height: 95%; border-radius: 10px; box-shadow: 0 0 10px #3268d2; background: #ffffff;padding: 10px;">
<ion-scroll delegate-handle="pdfScroll1" zooming="true" direction="xy"
style="width: 100%; height: 100%;" scrollbar-y="false" scrollbar-x="false"
min-zoom="1">
<div id="pdf-popTF"
style="width: 100%; height: 100%;border-radius: 10px; background: #ffffff;margin: 0px;position: absolute;padding: 0px;">
</div>
</ion-scroll>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related packaging methods:
/ * string-> Unit8Array * /
function char2buf (str) {
var out = new ArrayBuffer (str.length);
var u16a = new Uint8Array (out);
var strs = str.split ("");
for (var i = 0; i <strs.length; i ++) {
u16a [i] = strs [i] .charCodeAt ();
}
return u16a;
}
// The object defined by the PDF.js plugin, the URL of the given pdf file or a Uint8Array array , Call PDFJS.getDocument () to get
var pdfDoc = null;
// scaling ratio
var scale = 1;
// total number of pages in pdf file
var count = 1;
/ * pass the decoded value to PDFJS.getDocument () , Hand over to pdf.js * /
var showPdfFile = function (pdf) {
var data = char2buf (window.atob (pdf));
pdfjsLib.getDocument ({
data: data,
cMapUrl: 'lib / pdf.js / web / cmaps /',
cMapPacked: true
}). then (function (pdfDoc_) {
pdfDoc = pdfDoc_;
count = pdfDoc.numPages;
// Draw all pages
renderAll ();
}) ;
};
var isRead = false;
var readTime = 5;
var showPdfFileTF = function (pdf) {
var data = char2buf (window.atob (pdf));
pdfjsLib.getDocument ({
data: data,
cMapUrl: 'lib / pdf. js / web / cmaps / ',
cMapPacked: true
}). then (function (pdfDoc_) {
pdfDoc = pdfDoc_;
count = pdfDoc.numPages;
// Draw all pages
renderAllTF ();
});
if (isRead) {
$ ('# pdf-containerTF ion-scroll'). css ('height', '90% ');
readTime = 5;
$ (' # validateRead '). show ();
$ ('#validateRead'). text ('I have read (' + readTime + 's' +') ');
var read = function () {
readTime--;
$ (' # validateRead '). text (' I Read ('+ readTime +' s '+') ');
if (readTime <= 0) {
$ (' # validateRead '). Text (' I have read '). Css (' background ',' # ff8400 ');
clearInterval (timeId);
}
}
var timeId = setInterval (read, 1000);
} else {
$('#pdf-containerTF ion-scroll').css('height', '100%');
}
}
var showPdfFileList = function(pdf) {
for (var i = 0; i < pdf.length; i++) {
showPdfFile(pdf[i])
}
}
var showPdfFileListTF = function(pdf) {
for (var i = 0; i < pdf.length; i++) {
showPdfFileTF(pdf[i])
}
}
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(scale);
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 () {
// This is to draw one page at a time After the callback function
// console.log ("Page" + num + "rendered");
});
});
}
var initial = null;
function renderPageTF (num, canvas) {
// Using promise to fetch the page
pdfDoc .getPage (num) .then (function (page) {
var ctx = canvas.getContext ('2d');
var viewport = page.getViewport (1);
var s = (parseInt ($ ('# pdf-containerTF ion-scroll'). css ('width'), 10) / viewport.width) .toFixed (4);
if (initial == null || initial> s ) {
initial = s;
}
// $ ('# pdf-popTF'). css ({'transform': 'translate (-20%, 0px) scale (' + initial + ')'});
// according to Media query, determine the window size start
function myFunction (x) {
if (x.matches) {// Media query
$ ('# pdf-popTF'). Css ({'transform': 'translate (-20%, 0px) scale ('+ initial +') '});
} else {
$ (' # pdf-popTF '). css ({' transform ':' translate (0%, 0px) scale ('+ null +') '} );
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction (x) // The monitor function called during execution
x.addListener (myFunction) // Add a listener when the state changes
// According to the media query, judge the window size end
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 () {
// This is the callback function after each page of content is drawn
// console.log ("Page" + num + "rendered");
});
});
}
function renderAll () {
for (var curPage = 1; curPage <= count; curPage ++) {
// Create a new <canvas> for and draw the content of the corresponding page to this canvas
var canvas = document.createElement ("canvas");
var div = document.createElement ("div");
$ (div) .attr ("id", "page" + curPage);
$ (div) .attr ("class", "page");
$ (div) .append (canvas);
$ ("# pdf-pop"). append (div);
renderPage (curPage, canvas);
}
}
function renderAllTF () {
initial = null;
for (var curPage = 1; curPage <= count; curPage ++ ) {
// Create a new <canvas> and draw the content of the corresponding page to this canvas
var canvas = document.createElement("canvas");
var div = document.createElement("div");
$(div).attr("id", "page" + curPage);
$(div).attr("class", "page");
$(div).append(canvas);
$("#pdf-popTF").append(div);
renderPageTF(curPage, canvas);
}
}
JS part:
// Display terms
$ scope.statements = [{
label: 'View terms',
showContent: false
}];
$ scope.statements1 = [{
label: 'View terms',
showContent: false
}];
// Display pdf
$ scope .showPdfFlagTF = false;
$ scope.showPdfFlagTF1 = false;
$ scope.contain = ['', ''];
$ scope.openPdfDialog = function (path, type) {
$ ionicLoading.show ({});
zytHttp.post ( "ZYT_TB_027", {urlPath: path}, function (data) {
if (data.item.file) {
if (type == 0) {
$ scope.contain [0] = data.item.file;
console.log($scope.contain[0]);
} else {
$scope.contain[1] = data.item.file;
console.log($scope.contain[1]);
}
if (type == 0) {
$scope.showPdfFlagTF = true;
} else {
$scope.showPdfFlagTF1 = true;
}
showPdfFileTF(data.item.file);
$ionicLoading.hide();
$scope.$apply();
} else {
$ionicLoading.hide({});
alert({ type: 'error', title: '错误', msg: data.error.msg, foot: '返回重试' });
}
}, function (data) {
$ionicLoading.hide({});
})
};
$scope.showDetail = function (type) {
var path = '';
if (type == 0) {
path = '/share/file/static/TPYX2018.pdf';
if ($scope.contain[0]) {
showPdfFileTF($scope.contain[0]);
} else {
$scope.openPdfDialog(path, type)
}
} else {
path = '/share/file/static/TPYX2018WN.pdf';
//条款
if ($scope.contain[1]) {
showPdfFileTF($scope.contain[1]);
} else {
$scope.openPdfDialog(path, type)
}
}
}
//点击显示条款内容
$scope.changeShowContent = function (index, type) {
if (type == 0) {
if (!$scope.statements[index].showContent) {
$scope.showDetail(type);
}
$scope.statements[index].showContent = !$scope.statements[index].showContent;
$ionicScrollDelegate.$getByHandle('contentScroll').resize();
} else {
if (!$scope.statements[index].showContent) {
$scope.showDetail(type);
}
$scope.statements1[index].showContent = !$scope.statements1[index].showContent;
$ionicScrollDelegate.$getByHandle('contentScroll').resize();
}
};